今回は、jsでブラウザバックを検知する方法を紹介します。
業務で特定のページでブラウザバックされた際にページの見た目を変更するというような業務があり、割とハマってしまったのでその共有です。
ネットでいくつか方法が出ていますが、できないものもいくつかありました。
正しく動作するものをみなさんも使えるよう参考にしてみてください。
この記事を読むメリット
- jsでブラウザバックを検知する方法が分かる
jsでブラウザバックの検知がうまくいかなかった方法
まず、自分が調べてうまくいかなかったものがいくつかあったのでそれを共有します。
ネットにもいくつか紹介されており試してみて動きませんでした。
ブラウザのバージョンが上がったりキャッシュの影響でうまく動作しなくなるので常に最新の情報や知識や必須ですね。
popstateイベント
まず調べて最初に出てきたのが「popstate」イベントでした。
<!DOCTYPE html>
<html>
<head>
<title>Browser Back Test</title>
</head>
<body>
<h1>Browser Back Test</h1>
<a href="/next.html">次のページ</a>
<script>
history.replaceState(null, null, null);
window.addEventListener('popstate', function (event) {
alert('Browser back button was pressed!');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
次のページ
</body>
</html>
このように確認用に2つのページを作成しアラートポップアップが表示されるか確認しました。
が、表示されませんでした。
https://developer.mozilla.org/ja/docs/Web/API/Window/popstate_event
MDNには、
mdn
popstateイベントは、戻るボタンや進むボタンをクリックする（あるいは JavaScript でhistory.back()やhistory.forward()を呼び出す）など、ブラウザーの操作によって発行されます。
このように書かれていました。
しかしどうやらブラウザ側で履歴を検知することができなくなっているようです。
history.replace()を試してもダメだった。。
それの解決策としてhistory.replace()を使って強制的に履歴を残す方法が紹介されておりました。
<!DOCTYPE html>
<html>
<head>
<title>Browser Back Test</title>
</head>
<body>
<h1>Browser Back Test</h1>
<a href="/next.html">次のページ</a>
<script>
history.replaceState(null, null, null);
window.addEventListener('popstate', function (event) {
alert('Browser back button was pressed!');
});
</script>
</body>
</html>
昔の記事ではこれでうまくいったというものも結構ありましたが、ブラウザのアップデートなどで対応されなくなったと思われます。
しかし、これでも検知できませんでした。
エンジニアにおすすめ書籍
エンジニアになりたて、これから勉強を深めていきたいという方におすすめの書籍はこちら！
ブラウザバックを検知できる：PerformanceNavigationTiming: type
続いて「PerformanceNavigationTiming: type」というものを使った方法です。
まず、「PerformanceNavigationTiming」がブラウザーの文書ナビゲーションイベントに関するメトリックを格納および取得するためのインターフェースになります。
その中の「type」プロパティでナビゲーションのタイプが取得できるようになっています。
そしてtypeが「“back_forward”」がブラウザの履歴になります。
以下のように使うとブラウザバックを検知できるようです。
const entries = performance.getEntriesByType('navigation');
entries.forEach((entry) => {
if (entry.type === 'back_forward') {
alert('ブラウザバックしたよ！');
}
});これでブラウザバックしてみるときちんとアラートが出ました！
typeプロパティには「back_forward」の他にも、「navigate」「reload」「prerender」があります。
詳しくは以下を参考にしてみてください。
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type
ブラウザバックは「PerformanceNavigationTiming.type」で検知
いかがだったでしょうか。
以前は有効だった方法もブラウザなどの進化でうまく機能しない例も多々あります。
今回のブラウザバックの検知方法も一昔前では有効だった方法が使えなくなっています。
常に最新の情報をキャッチアップする癖をつけたいものです。
