More than 1 year has passed since last update.

[JavaScript][メモ]popstateイベントをサンプルコードで挙動確認

JavaScript

Posted at 2022-02-23

はじめに

（注）「～が解決した」みたいな記事じゃなくて、popstateイベントについてのメモです。

業務中、とある画面でブラウザボタンを押すとbfcache（ブラウザバック時に使うキャッシュ）が悪さをして、想定外の挙動をしてしまう、という状態だった

状況

A画面

①↓　↑②　↓③

B画面

①ボタンを押して画面遷移（POST送信による遷移）

②ブラウザバックで画面遷移

③再度ボタンを押して画面遷移→①でキャッシュに保存された値でリクエストしてしまいエラー
（具体的には、楽観ロックエラー）

対応策としてのpopstateイベント

この時に②でブラウザバックで遷移後、この「ブラウザバックしたこと」を検知して、ブラウザバックしたのであれば、強制的にリロードしてしまおう、と考えました。

サンプルコードで試してみる

いくつか記事を拝見しましたが、自分の理解力が乏しく自分のやりたいように動いてくれるかわからなかったので、サンプルコードを自作して挙動を確認

A画面

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A</title>
    <script>
    history.replaceState(null, null, null);
    window.addEventListener('popstate', function(e) {
        alert('popstate!!');
    });
    </script>
</head>
<body>
    <h1>indexAです</h1>
    <a href="./indexB.html">Bへ遷移</a>
</body>
</html>

いくつか書いてある参考記事（本記事文末）通りですが、

history.replaceState(null, null, null);

これで、この画面の履歴（history）を置き換えます。

大事なのは第3引数で、ここはhistoryに保存するurlを指定します。
nullにすると現在のurlを保存するようになります。

そして、次に同じ画面に遷移した際にhistoryを上書きします。

 window.addEventListener('popstate', function(e) {
        alert('popstate!!');
    });

ここではブラウザバックされた際の処理を書いています。

今回は先ほどのreplaceStatusで必ずhistoryに履歴が保存されるので、必ずブラウザバックした際にこの処理を実行することになります。

popstatusはブラウザの履歴が変更された際に発火するイベント

B画面

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B</title>
</head>
<body>
    <h1>indexBです</h1>
    <p>ブラウザバックしてください</p>
</body>
</html>