ブラウザの「戻る／進む」でページが開かれたことを検知する方法

ブラウザの「戻る／進む」でページが開かれたことを検知する方法

May 2, 2022

TL;DR #

PerformanceNavigationTiming.type が "back_forward" であれば、ブラウザの「戻る／進む」でページが開かれています。

function printNavigationType() {
  const perfEntries = performance.getEntriesByType('navigation');
  perfEntries.forEach((entity) => {
    console.log(entity.type); // e.g. "back_forward"
  });
}

説明 #

  1. ブラウザ環境でグローバルに定義されている performance プロパティからは Performance オブジェクトが取得できます。
  2. Performance オブジェクトの getEntriesByType() メソッドを使うことで PerformanceNavigationTiming オブジェクトが取得できます。
  3. PerformanceNavigationTiming オブジェクトの type プロパティを見ることで、そのページがどのように開かれたのか判定できます。

例えば以下のように判定することができます。

function isBackForwardNavigation() {
  const isBrowser = typeof window !== 'undefined';
  return (
    isBrowser &&
    performance.getEntriesByType('navigation').some((entity) => entity.type === 'back_forward')
  );
}

補足：performance.navigation.type は非推奨 #

performance.navigation.type を参照することでも「戻る／進む」の判定ができます。

ただし、performance.navigation の参照はすでに非推奨となっているため、今後こちらの方法は利用しない方が良いです。

その他参考 #