Q&A
yasutomiさん
ご回答ありがとうございます。
回答いただいたスクリプトに変更してみましたが、同様の動作をしてしまいました。
GoogleChromeのバグ？？なのでしょうか。
IE,Edgeでは回答いただいたスクリプトでもうまく動きます。
HistoryAPI（下記コード）を利用して、ブラウザバック抑止を行っています。
- 実装するJavascript
Javascript
1 <script> 2 history.pushState(null, null, null); 3 4 // popState イベントをハンドリング 5 $(window).on('popstate', function(e){ 6 history.pushState(null, null, null); 7 return; 8 }); 9 10 </script>
最初のページにリンクを配置（index.html）
HTML
1<!doctype html> 2<html> 3 <head> 4 </head> 5 <body> 6 <div>最初のページ</div> 7 <a href="next.html">次の画面へ</a> 8 </body> 9</html>
- 次のページに上記のJavascriptを実装したHTML（next.html)
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <script type="text/javascript" src="./js/jquery.js"></script> 5 <script> 6 history.pushState(null, null, null); 7 // popState イベントをハンドリング 8 $(window).on('popstate', function(e){ 9 history.pushState(null, null, null); 10 return; 11 }); 12 13 </script> 14 </head> 15 <body> 16 <div>2ページ目</div> 17 </body> 18</html>
上記のソースを用意して以下を実行
- index.htmlを開く
- 「次の画面へ」リンクをクリック
- next.htmlが開いたあと、すぐブラウザバックボタン
実行結果
3.の操作で、IE11,Microsoft Edgeはブラウザバックが抑止され、index.htmlには戻らないが
GoogleChrome（バージョン: 75.0.3770.100（Official Build） （64 ビット））で試した場合は
index.htmlに戻ってしまう。
試しに、popstate内にalert();を記述したところ、Chromeだとイベントそのものが発火していないことがわかりました。
ただし、上記3でnext.htmlが開いたあと、画面上をどこかクリックしたり、キーボードでなにかたたいたりすると、popstateイベントが発火するようになり、IEやEdgeと同じ挙動になります。
Chromeでブラウザバックを抑止する方法がほかにないでしょうか。
ご教授のほど、よろしくお願いします。
回答2件
0
こちらですが、残念ながらブラウザバック抑止はChromeでは使えません。
この機能を使ったスパムサイトなどが各所で増えたらしく、Google側で対処を行った結果です。
ユーザーとしての体験も悪いですしね。
詳しく知りたいなら、手前味噌ですがこちらをご覧ください。
https://11-30am.com/27/
投稿2020/01/10 02:31
総合スコア142
0
下記のようにすれば動作すると思うのですが、いかがでしょうか。
js
1history.pushState(null, null, null); 2window.addEventListener('popstate', function(e) { 3 history.pushState(null, null, null); 4});
投稿2019/06/24 14:00
総合スコア2939
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。