ブラウザ間の違いを克服！「戻る」ボタンクリック時のページロードイベントを検出する方法

2024-04-09

ブラウザ間の違いを克服！「戻る」ボタンクリック時のページロードイベント

この解説では、「戻る」ボタン クリック時のページロードイベントについて、ブラウザ間の違いと、それを克服する方法を分かりやすく解説します。

ページロードイベントとは？

ページロードイベント は、Web ページが読み込まれた際に発生するイベントです。このイベントを利用することで、ページ読み込み後の処理を実行できます。

例：

ページ全体の表示
アニメーションの開始
データの読み込み

戻るボタンとページロードイベント

「戻る」ボタン をクリックすると、ブラウザ履歴から前のページに戻ります。この時、ページロードイベント が発生するかどうかは、ブラウザによって異なります。

主要なブラウザの挙動

Chrome、Firefox、Edge: 戻るボタンクリック時に ページロードイベント が発生しない
Safari、Internet Explorer: 戻るボタンクリック時に ページロードイベント が発生する

戻るボタンクリック時のページロードイベントを検出する方法

ブラウザ間の違いを克服するために、以下の方法で 戻るボタンクリック時のページロードイベント を検出できます。

方法 1：history.state オブジェクトを使用する

history.state オブジェクトは、ページ遷移履歴に保存できるデータです。このオブジェクトを利用することで、戻るボタンクリック時にページロードイベントを検出できます。

// ページ遷移時に `history.state` に値を設定
window.onbeforeunload = function() {
  history.state = {
    isBackNavigation: true
  };
};

// ページロード時に `history.state` をチェック
window.onload = function() {
  if (history.state && history.state.isBackNavigation) {
    // 戻るボタンクリック時の処理
  }
};

方法 2：pageshow イベントを使用する

pageshow イベントは、ページが表示される際に発生するイベントです。このイベントを利用することで、戻るボタンクリック時にページロードイベントを検出できます。

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    // 戻るボタンクリック時の処理
  }
});

方法 3：セッションストレージを使用する

セッションストレージは、ブラウザセッション中にデータを保存できる機能です。この機能を利用することで、戻るボタンクリック時にページロードイベントを検出できます。

// ページ遷移時にセッションストレージに値を設定
window.onbeforeunload = function() {
  sessionStorage.setItem('isBackNavigation', true);
};

// ページロード時にセッションストレージをチェック
window.onload = function() {
  if (sessionStorage.getItem('isBackNavigation')) {
    // 戻るボタンクリック時の処理
    sessionStorage.removeItem('isBackNavigation');
  }
};

まとめ

「戻る」ボタン クリック時の ページロードイベント は、ブラウザによって挙動が異なるため、注意が必要です。

上記の方法を参考に、ブラウザ間の違いを克服し、目的に合った処理を実行してください。

補足

上記の方法は、あくまで参考例です。状況に合わせて、適切な方法を選択してください。
詳細については、各ブラウザのドキュメントを参照してください。

// ページ遷移時に `history.state` に値を設定
window.onbeforeunload = function() {
  history.state = {
    isBackNavigation: true
  };
};

// ページロード時に `history.state` をチェック
window.onload = function() {
  if (history.state && history.state.isBackNavigation) {
    console.log('戻るボタンがクリックされました');
  }
};

window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    console.log('戻るボタンがクリックされました');
  }
});

// ページ遷移時にセッションストレージに値を設定
window.onbeforeunload = function() {
  sessionStorage.setItem('isBackNavigation', true);
};

// ページロード時にセッションストレージをチェック
window.onload = function() {
  if (sessionStorage.getItem('isBackNavigation')) {
    console.log('戻るボタンがクリックされました');
    sessionStorage.removeItem('isBackNavigation');
  }
};

上記はいずれも、「戻る」ボタン クリック時にコンソールに「戻るボタンがクリックされました」と出力するサンプルコードです。

これらのコードは、実際のプロジェクトに合わせて、必要に応じて修正してください。

サンプルコードの解説

方法 1:

window.onbeforeunload イベントハンドラで、ページ遷移時に history.state オブジェクトに isBackNavigation プロパティを設定します。

window.addEventListener 関数で pageshow イベントリスナーを追加します。
pageshow イベントハンドラの event.persisted プロパティをチェックします。

サンプルコードの利用方法

これらのサンプルコードは、HTML ファイルに記述して実行することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
</head>
<body>
  <script>
    // サンプルコード
  </script>
</body>
</html>

上記コードを index.html などの名前で保存し、ブラウザで開くと、「戻る」ボタン クリック時にコンソールに「戻るボタンがクリックされました」と出力されます。

サンプルコードの注意点

また、ブラウザによっては、サンプルコードが正しく動作しない場合があります。

戻るボタンクリック時のページロードイベントを検出するその他の方法

location.hash を使用する

location.hash は、URL のハッシュフラグメントを取得または設定できるプロパティです。ハッシュフラグメントは、URL の # 以降の部分です。

このプロパティを利用することで、戻るボタンクリック時にページロードイベントを検出できます。

// ページ遷移時に `location.hash` に値を設定
window.onbeforeunload = function() {
  location.hash = '#backNavigation';
};

// ページロード時に `location.hash` をチェック
window.onload = function() {
  if (location.hash === '#backNavigation') {
    console.log('戻るボタンがクリックされました');
    location.hash = '';
  }
};

仕組み：

ページ遷移時に、location.hash に #backNavigation という値を設定します。
#backNavigation だったら、戻るボタンクリック時の処理を実行し、location.hash を空にします。

performance.navigation.type を使用する

performance.navigation.type は、ページ遷移の種類を取得できるプロパティです。

window.onload = function() {
  if (performance.navigation.type === 'back_forward') {
    console.log('戻るボタンがクリックされました');
  }
};

ページロード時に、performance.navigation.type の値をチェックします。
値が back_forward だったら、戻るボタンクリック時の処理を実行します。

onpopstate イベントを使用する

onpopstate イベントは、ブラウザ履歴の状態が変化した際に発生するイベントです。

window.addEventListener('popstate', function(event) {
  console.log('戻るボタンがクリックされました');
});

popstate イベントハンドラで、戻るボタンクリック時の処理を実行します。

注意点

これらの方法は、ブラウザのバージョンや設定によって動作が異なる場合があります。

また、これらの方法を組み合わせて使用することもできます。

まとめ

「戻る」ボタン クリック時の ページロードイベント を検出する方法はいくつかあります。

javascript pageload

ブラウザ間の違いを克服！「戻る」ボタンクリック時のページロードイベントを検出する方法