ブラウザバックをjavascriptで判定する方法とつかいどころ

※本ページはプロモーションを含みます

はじめに

ホームページを閲覧中、前のページに戻りたい時にはだいたいの人がブラウザの戻るボタン（ブラウザバック）を使用すると思います。

スマホでは特にグローバルメニューを押すのが面倒なのでPCよりも多用するかもしれません。

ブラウザバックを想定していないページでは意図しない表示をしてしまうことがあります。

そんな時はjavascriptでブラウザバックを判定して処理を書いて対応しましょう。

ブラウザバックを判定するコード

history.pushState(null, null, null);
window.addEventListener('popstate', () => {
    // ▼下記は関係ない処理です
    if (confirm('本当に戻っても良いですか？')) {
        history.back();
    }
});

history.pushState　は履歴に追加する処理を行います。

そしてaddEventListenerでpopstateイベントの際に処理を追加します。

この’popstate’がブラウザバックのイベントになります。

なぜブラウザバックで表示がおかしくなるのか

ブラウザバックで移動する場合、普通のページ移動のように

1. WEBサーバーにリクエスト送信
2. WEBサーバーからの返答を取得、表示

という流れでページを表示してくれれば何も問題は起こらないのですが

1. 各端末に保存されたページ遷移前の状態を表示

という処理を行うのでおかしくなります。

この機能はback-forward cache（bfcache）と呼ばれアクセスしたページをメモリに保存します。

その際、javascriptの状態も保存されてしまうのでonloadイベントが処理されないようになるのです。

このbfcacheはiOS safariで顕著に現れるので実機検証の際に「あれ？動きが違う…」という状況になります。

※bfcache自体はfirefox、safari、chromeなど主要ブラウザで機能として存在します。

キャッシュを読み込んでいるがために表示がおかしい場合の修正法

iPhoneはブラウザバック時にjsまわりの表示がおかしくなることがたまにあるのでjavascriptでブラウザバックを判定してキャッシュを読み込んでいる場合のみページをリロードして表示の不具合を解消します。

window.addEventListener('pageshow', (e) => {
  if (e.persisted) {
    window.location.reload();
  }
});

コードの流れとしてはaddEventListenerでpageshowイベント呼び出し時に処理をおこない。

イベントのpersistedというプロパティがキャッシュからの読み込み判定になるので、persistedがtrueの場合、キャッシュから呼び出されているのでwindow.location.reload()で強制的にページを読み込むようにします。

これで通常のページ移動のように都度loadが走るようになります。