9
9
如果该事件对象的` returnValue ` 属性是一个非空字符串,那么浏览器就会弹出一个对话框,询问用户是否要卸载该资源。但是,用户指定的字符串可能无法显示,浏览器会展示预定义的字符串。如果用户点击“取消”按钮,资源就不会卸载。
10
10
11
11
``` javascript
12
- window .addEventListener (' beforeunload' , function (event ) {
12
+ window .addEventListener (' beforeunload' , function (event ) {
13
13
event .returnValue = ' 你确定离开吗?' ;
14
14
});
15
15
```
@@ -19,17 +19,17 @@ window.addEventListener('beforeunload', function(event) {
19
19
浏览器对这个事件的行为很不一致,有的浏览器调用` event.preventDefault() ` ,也会弹出对话框。IE 浏览器需要显式返回一个非空的字符串,才会弹出对话框。而且,大多数浏览器在对话框中不显示指定文本,只显示默认文本。因此,可以采用下面的写法,取得最大的兼容性。
20
20
21
21
``` javascript
22
- window .addEventListener (' beforeunload' , function (e ) {
22
+ window .addEventListener (' beforeunload' , function (e ) {
23
23
var confirmationMessage = ' 确认关闭窗口?' ;
24
24
25
25
e .returnValue = confirmationMessage;
26
26
return confirmationMessage;
27
27
});
28
28
```
29
29
30
- 注意,许多手机浏览器默认忽略这个事件,桌面浏览器也有办法忽略这个事件。所以,它可能根本不会生效,不能依赖它来阻止用户关闭窗口。
30
+ 注意,许多手机浏览器默认忽略这个事件,桌面浏览器也有办法忽略这个事件。所以,它可能根本不会生效,不能依赖它来阻止用户关闭窗口。另外,一旦使用了 ` beforeunload ` 事件,浏览器就不会缓存当前网页。因为执行了这个事件以后,缓存页面就没意义了。
31
31
32
- 另外,一旦使用了 ` beforeunload ` 事件,浏览器就不会缓存当前网页。因为执行了这个事件以后,缓存页面就没意义了 。
32
+ 基本上,只有一种场合可以监听 ` unload ` 事件,其他情况都不应该监听:用户修改了表单,还没有保存就要离开 。
33
33
34
34
### unload 事件
35
35
@@ -43,7 +43,7 @@ window.addEventListener('unload', function(event) {
43
43
});
44
44
```
45
45
46
- 跟 ` beforeunload ` 事件一样,一旦使用了` unload ` 事件,浏览器就不会缓存当前网页,理由同上。
46
+ 手机上,浏览器或系统可能会直接丢弃网页,这时该事件根本不会发生。而且跟 ` beforeunload ` 事件一样,一旦使用了` unload ` 事件,浏览器就不会缓存当前网页,理由同上。因此,任何情况下都不应该依赖这个事件,指定网页卸载时要执行的代码,可以考虑完全不使用这个事件 。
47
47
48
48
### load 事件,error 事件
49
49
@@ -91,6 +91,8 @@ window.addEventListener('pageshow', function(event){
91
91
92
92
如果页面包含` <frame> ` 或` <iframe> ` 元素,则` <frame> ` 页面的` pageshow ` 事件和` pagehide ` 事件,都会在主页面之前触发。
93
93
94
+ 注意,这两个事件只在浏览器的` history ` 对象发生变化时触发,跟网页是否可见没有关系。
95
+
94
96
### popstate 事件
95
97
96
98
` popstate ` 事件在浏览器的` history ` 对象的当前记录发生显式切换时触发。注意,调用` history.pushState() ` 或` history.replaceState() ` ,并不会触发` popstate ` 事件。该事件只在用户在` history ` 记录之间显式切换时触发,比如鼠标点击“后退/前进”按钮,或者在脚本中调用` history.back() ` 、` history.forward() ` 、` history.go() ` 时触发。
0 commit comments