質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

21794閲覧

HistoryAPIを利用した、ブラウザバック抑止がChromeで動かない

hako2006084

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/06/24 13:15

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>

上記のソースを用意して以下を実行

  1. index.htmlを開く
  2. 「次の画面へ」リンクをクリック
  3. 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でブラウザバックを抑止する方法がほかにないでしょうか。
ご教授のほど、よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

こちらですが、残念ながらブラウザバック抑止はChromeでは使えません。
この機能を使ったスパムサイトなどが各所で増えたらしく、Google側で対処を行った結果です。
ユーザーとしての体験も悪いですしね。

詳しく知りたいなら、手前味噌ですがこちらをご覧ください。
https://11-30am.com/27/

投稿2020/01/10 02:31

takuhito_hihara

総合スコア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

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hako2006084

2019/06/25 00:26

yasutomiさん ご回答ありがとうございます。 回答いただいたスクリプトに変更してみましたが、同様の動作をしてしまいました。 GoogleChromeのバグ??なのでしょうか。 IE,Edgeでは回答いただいたスクリプトでもうまく動きます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問