回答編集履歴
2
コメントへの返信
answer
CHANGED
|
@@ -4,4 +4,36 @@
|
|
|
4
4
|
ブラウザの戻るボタンを押した時、`popstate`イベントが発生します。`history.pushState`により、空の履歴が追加されるため、ページは戻らず、モーダルを表示しています。ここまでは想定通りだと思います。
|
|
5
5
|
しかし、表示したモーダルの中のIタグで、`history.back()`をする時にも、`popstate`イベントが発生します。発生したイベントにより、さらにもう一度空の履歴が追加され、ページは戻りません。こうして無限ループに陥ります。
|
|
6
6
|
|
|
7
|
-
この問題を解決するにはいくつか方法がありますが、一番手っ取り早い方法はIタグの`history.back()`を`history.go(-2)`に変更することです。この変更により、`history.pushState`によって追加された空の履歴の一つ前にジャンプすることができます。
|
|
7
|
+
この問題を解決するにはいくつか方法がありますが、一番手っ取り早い方法はIタグの`history.back()`を`history.go(-2)`に変更することです。この変更により、`history.pushState`によって追加された空の履歴の一つ前にジャンプすることができます。
|
|
8
|
+
|
|
9
|
+
EDIT ソースコードの追記場所
|
|
10
|
+
`$(function(){})`の内部であれば、基本的にどこでも構いません。
|
|
11
|
+
```js
|
|
12
|
+
$(function(){
|
|
13
|
+
// ここか //
|
|
14
|
+
history.pushState(null, null, null);
|
|
15
|
+
$(window).on("popstate", function (event) {
|
|
16
|
+
history.pushState(null, null, null);
|
|
17
|
+
$('.modal-wrapper').fadeIn();
|
|
18
|
+
});
|
|
19
|
+
// ここに記述 //
|
|
20
|
+
});
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
基本的に、Head内にソースを書いたJavaScriptはHTMLの描写より早く行われます。JavaScriptの中にHTMLの要素を呼び出すコードを記入する際、この順番を意識しなければいけません。なぜなら、HTMLの描写がされていない場合、`.close-modal`という要素は存在しないからです。
|
|
24
|
+
|
|
25
|
+
jQueryでは、`$()`の中にコードを渡すと、そのコードはHTMLの描写が完了した後に呼び出されます。
|
|
26
|
+
|
|
27
|
+
ちなみに、発展的な内容ですがjQueryを使わずともHTMLの描写が終わった時に呼び出すこともできます。
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
// document.addEventListener(XX, YY)
|
|
31
|
+
// ページにXXというイベントが発生した時にYYという関数を実行します
|
|
32
|
+
document.addEventListener('DOMContentLoaded', function (event) {
|
|
33
|
+
// ここに記述 //
|
|
34
|
+
})
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
XXには様々なものを入れることができます。これは`jQuery.on()`の中に入れるものと同じで、`click`だとか`change`だとかも入れることができます。
|
|
38
|
+
|
|
39
|
+
JavaScriptではイベントという概念が重要になってきますので、ぜひ勉強してみてください。
|
1
文章をよりわかりやすくしました。
answer
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
戻るボタンを押した時と同じく、
|
|
1
|
+
戻るボタンを押した時と同じく、`history.back()`する時にも`popstate`が発火するため、戻る動作をブロックするコード`history.pushState`が実行されているのが原因です。
|
|
2
2
|
|
|
3
|
+
イベントについてもう少し掘り下げてみましょう。
|
|
3
|
-
|
|
4
|
+
ブラウザの戻るボタンを押した時、`popstate`イベントが発生します。`history.pushState`により、空の履歴が追加されるため、ページは戻らず、モーダルを表示しています。ここまでは想定通りだと思います。
|
|
4
5
|
しかし、表示したモーダルの中のIタグで、`history.back()`をする時にも、`popstate`イベントが発生します。発生したイベントにより、さらにもう一度空の履歴が追加され、ページは戻りません。こうして無限ループに陥ります。
|
|
5
6
|
|
|
6
7
|
この問題を解決するにはいくつか方法がありますが、一番手っ取り早い方法はIタグの`history.back()`を`history.go(-2)`に変更することです。この変更により、`history.pushState`によって追加された空の履歴の一つ前にジャンプすることができます。
|