質問: ### 前提・実現したいこと javascript,jQery初心者です。 バックブラウザしようとしたらモーダルを表示させ、を押したら前のページに戻る仕組みを 作りたいと思っています。 ### 発生している問題・エラーメッセージ バックブラウザをしたらポップアップは表示させるところまでは完成したのですが、 ボタンを押しても前のページに戻ることができません。 なので永遠にそのページから離脱することができなくなってしまいました、、、 ### 該当のソースコード ``` ``` ``` /*モーダル*/ .modal-wrapper{ display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 100; } .modal { position: absolute; top: 20%; left: 10%; background-color: #e6ecf0; padding: 40px 0 40px; border-radius: 10px; width: 80%; height: auto; text-align: center; } #image{ width:100%; } .fa-times-circle-o { position: absolute; top: 12px; right: 12px; color: rgba(128, 128, 128, 0.46); cursor: pointer; font-size: 30px; } ``` ``` ``` ### 試したこと 1はじめはjavascriptで一つ前の履歴を取得するような書き方をしていたのですが反映されず、 2HTMLのaタグでに一つ前の履歴を取得すという記述の仕方にしてみました。 ですが 1を押しても何も起こらない 2を押すとモーダルの表示が消えまた表示される ### 補足情報(FW/ツールのバージョンなど) バックブラウザを無効化しているからいけないのでしょうか、、、? 勉強中のため根本的にわかっていないところがあるかもしれません。 なにかヒントやアドバイスを頂けたら幸いです。 よろしくお願いいたします!
回答: 戻るボタンを押した時と同じく、`history.back()`する時にも`popstate`が発火するため、戻る動作をブロックするコード`history.pushState`が実行されているのが原因です。 イベントについてもう少し掘り下げてみましょう。 ブラウザの戻るボタンを押した時、`popstate`イベントが発生します。`history.pushState`により、空の履歴が追加されるため、ページは戻らず、モーダルを表示しています。ここまでは想定通りだと思います。 しかし、表示したモーダルの中のIタグで、`history.back()`をする時にも、`popstate`イベントが発生します。発生したイベントにより、さらにもう一度空の履歴が追加され、ページは戻りません。こうして無限ループに陥ります。 この問題を解決するにはいくつか方法がありますが、一番手っ取り早い方法はIタグの`history.back()`を`history.go(-2)`に変更することです。この変更により、`history.pushState`によって追加された空の履歴の一つ前にジャンプすることができます。 EDIT ソースコードの追記場所 `$(function(){})`の内部であれば、基本的にどこでも構いません。 ``` $(function(){ // ここか // history.pushState(null, null, null); $(window).on("popstate", function (event) { history.pushState(null, null, null); $('.modal-wrapper').fadeIn(); }); // ここに記述 // }); ``` 基本的に、Head内にソースを書いたJavaScriptはHTMLの描写より早く行われます。JavaScriptの中にHTMLの要素を呼び出すコードを記入する際、この順番を意識しなければいけません。なぜなら、HTMLの描写がされていない場合、`.close-modal`という要素は存在しないからです。 jQueryでは、`$()`の中にコードを渡すと、そのコードはHTMLの描写が完了した後に呼び出されます。 ちなみに、発展的な内容ですがjQueryを使わずともHTMLの描写が終わった時に呼び出すこともできます。 ``` // document.addEventListener(XX, YY) // ページにXXというイベントが発生した時にYYという関数を実行します document.addEventListener('DOMContentLoaded', function (event) { // ここに記述 // }) ``` XXには様々なものを入れることができます。これは`jQuery.on()`の中に入れるものと同じで、`click`だとか`change`だとかも入れることができます。 JavaScriptではイベントという概念が重要になってきますので、ぜひ勉強してみてください。