- 「popstate」イベントの使用: ブラウザの履歴が変更されたときに発生する「popstate」イベントを使用します。このイベントは、戻るボタンがクリックされたときにもトリガーされます。
window.addEventListener('popstate', function(event) {
// onloadイベントの処理をここに記述する
});
- onloadイベントの処理: 「popstate」イベントが発生したときに実行される処理内で、onloadイベントの処理を実装します。
window.addEventListener('popstate', function(event) {
// onloadイベントの処理を実行する関数を呼び出す
handleOnLoad();
});
function handleOnLoad() {
// onloadイベントの処理をここに記述する
}
- ページの初回読み込み時にも処理を行う: 戻るボタンをクリックした場合だけでなく、ページの初回読み込み時にも同じ処理を行いたい場合は、以下のように初回読み込み時にも「popstate」イベントをトリガーする必要があります。
window.addEventListener('load', function(event) {
// 初回読み込み時にも「popstate」イベントをトリガーする
history.replaceState({ page: 1 }, '');
// onloadイベントの処理を実行する関数を呼び出す
handleOnLoad();
});
これで、ブラウザの戻るボタンをクリックしたときにクロスブラウザで正しく動作するonloadイベントを実装することができます。必要に応じて、handleOnLoad関数内に必要なコードを追加してください。
以上が、シンプルで簡単な方法といくつかのコード例です。これらの手順を実装することで、目的の動作を実現できるはずです。