ブラウザバック検知の方法、window.addEventListener('popstate')について

記事検索を行うようなサイトの実装を行っております。
ページネーション機能を搭載しており、クリックしたページによって表示される記事（リンク）をクリックし、そこからブラウザバックで戻った際に、遷移前にクリックしたページネーション番号を保持しておきたいです。
sessionStrageを使って番号の保存、取得で制御を行っておりましたが、この場合、サイトのリンクを辿って再度同じページを表示した際も番号を保持したままになります。
ブラウザバック時のみの動作としたく、リンクを辿って再度戻った場合は通常の１ページ目が表示されていて欲しいです。

そこでjavascriptでブラウザバックを検知できないか調べていたところ、以下のような実装を見つけました。

window.addEventListener('popstate', (e) => {
        // alert
        alert("a");
    });

ですが、これが動作しないので調べたところ、Chromeではセキュリティ対策の為動作しないという記載を見つけました。
ここで手詰まりになったのですが、上手く実装する方法はありますでしょうか？

【やりたいこと】
・ブラウザの戻るボタンを押した際にのみ、状態保持を行いたい。

【前提】
ページネーションはライブラリではなく、自作しています。

yambejp

2021/05/26 10:17

概念的でよくわかりません、現状どういうソースでどうなるのが問題か簡便に例示できませんか？ popstateするということはページ内リンクの遷移をチェックしたいのですか？

行動規範の内容に同意します

回答1件

ベストアンサー

History API のreplaceState関数で現在の履歴に対して任意のObjectをstateとして保存することができます。
例えば、以下のようなページ page1.html、page2.html を用意します。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>page1</title>
8  <link rel="stylesheet" href="style.css">
9</head>
10<body>
11  <header>
12    <a href="page2.html">page2.html</a>
13    <!-- リンク先だけ変えたpage1.htmlとpage2.htmlを用意してください。 -->
14    <a href="page1.html">page2.html</a>
15  </header>
16  <div>
17    <button onclick="setPagination(1)">1</button>
18    <button onclick="setPagination(2)">2</button>
19    <button onclick="setPagination(3)">3</button>
20    <button onclick="setPagination(4)">4</button>
21    <button onclick="setPagination(5)">5</button>
22    <div id="page">1</div>
23  </div>
24  <script>
25    function setPagination(p){
26      document.querySelector('#page').innerHTML = p;
27      history.replaceState({pagination: p},"", document.location);
28      console.log(`ページ変更：${history.state.pagination}`);      
29    }
30
31    window.addEventListener('popstate', e => {
32      let state = history.state;
33      console.log("onpopstate",history, history.state);
34    });
35    window.addEventListener('load', e => {
36      let state = history.state;
37      console.log(history, history.state);
38      if(state){
39        document.querySelector('#page').innerHTML = state.pagination;
40        console.log(`ページセット：${history.state.pagination}`);
41      }
42    });
43  </script>
44</body>
45</html>

css
1/* style.css */
2div{
3  margin: 40px;
4  background-color: #abc;
5}
6div#page{
7  font-size: 100px;
8}
9header{
10  position: fixed;
11  height: 40px;
12  top: 0;
13}

ページ番号をクリックすると画面のページ番号が変更されると同時に現在の履歴へページ番号がstateとして保存されます。別のページへ遷移し、ブラウザの戻るで戻ってきた際もこの履歴とstateは保持されています。
この保存されたページ番号をload時に読み込むことにより、履歴上のページ番号を再現することができるのではないかと思います。
popstateイベントハンドラはpushStateとセットで使うことが前提みたいで、単純なブラウザバックには反応しないようです。popstateで実装を考えるよりreplaceStateを使った方が簡単な実装にできるのではないかなと思っています。

投稿2021/05/26 15:03