@@ -27,9 +27,9 @@ window.addEventListener('beforeunload', function (e) {
27
27
});
28
28
```
29
29
30
- 注意,许多手机浏览器默认忽略这个事件 ,桌面浏览器也有办法忽略这个事件。所以,它可能根本不会生效,不能依赖它来阻止用户关闭窗口。另外,一旦使用了 ` beforeunload ` 事件,浏览器就不会缓存当前网页,使用“回退”按钮将重新向服务器请求网页。这是因为监听这个事件的目的,一般是修改初始状态,这时缓存初始页面就没意义了 。
30
+ 注意,许多手机浏览器(比如 Safari)默认忽略这个事件 ,桌面浏览器也有办法忽略这个事件。所以,它可能根本不会生效,不能依赖它来阻止用户关闭浏览器窗口,最好不要使用这个事件 。
31
31
32
- 基本上,只有一种场合可以监听 ` unload ` 事件,其他情况都不应该监听:用户修改了表单,还没有保存就要离开 。
32
+ 另外,一旦使用了 ` beforeunload ` 事件,浏览器就不会缓存当前网页,使用“回退”按钮将重新向服务器请求网页。这是因为监听这个事件的目的,一般是为了网页状态,这时缓存页面的初始状态就没意义了 。
33
33
34
34
### unload 事件
35
35
@@ -45,6 +45,8 @@ window.addEventListener('unload', function(event) {
45
45
46
46
手机上,浏览器或系统可能会直接丢弃网页,这时该事件根本不会发生。而且跟` beforeunload ` 事件一样,一旦使用了` unload ` 事件,浏览器就不会缓存当前网页,理由同上。因此,任何情况下都不应该依赖这个事件,指定网页卸载时要执行的代码,可以考虑完全不使用这个事件。
47
47
48
+ 该事件可以用` pagehide ` 代替。
49
+
48
50
### load 事件,error 事件
49
51
50
52
` load ` 事件在页面或某个资源加载成功时触发。注意,页面或资源从浏览器缓存加载,并不会触发` load ` 事件。
@@ -59,13 +61,15 @@ window.addEventListener('load', function(event) {
59
61
60
62
这三个事件实际上属于进度事件,不仅发生在` document ` 对象,还发生在各种外部资源上面。浏览网页就是一个加载各种资源的过程,图像(image)、样式表(style sheet)、脚本(script)、视频(video)、音频(audio)、Ajax请求(XMLHttpRequest)等等。这些资源和` document ` 对象、` window ` 对象、XMLHttpRequestUpload 对象,都会触发` load ` 事件和` error ` 事件。
61
63
64
+ 最后,页面的` load ` 事件也可以用` pageshow ` 事件代替。
65
+
62
66
## session 历史事件
63
67
64
68
### pageshow 事件,pagehide 事件
65
69
66
70
默认情况下,浏览器会在当前会话(session)缓存页面,当用户点击“前进/后退”按钮时,浏览器就会从缓存中加载页面。
67
71
68
- pageshow 事件在页面加载时触发,包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码,可以放在这个事件的监听函数。
72
+ ` pageshow ` 事件在页面加载时触发,包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码,可以放在这个事件的监听函数。
69
73
70
74
第一次加载时,它的触发顺序排在` load ` 事件后面。从缓存加载时,` load ` 事件不会触发,因为网页在缓存中的样子通常是` load ` 事件的监听函数运行后的样子,所以不必重复执行。同理,如果是从缓存中加载页面,网页内初始化的 JavaScript 脚本(比如 DOMContentLoaded 事件的监听函数)也不会执行。
71
75
@@ -75,7 +79,7 @@ window.addEventListener('pageshow', function(event) {
75
79
});
76
80
```
77
81
78
- pageshow 事件有一个` persisted ` 属性,返回一个布尔值。页面第一次加载时,这个属性是` false ` ;当页面从缓存加载时,这个属性是` true ` 。
82
+ ` pageshow ` 事件有一个` persisted ` 属性,返回一个布尔值。页面第一次加载时,这个属性是` false ` ;当页面从缓存加载时,这个属性是` true ` 。
79
83
80
84
``` javascript
81
85
window .addEventListener (' pageshow' , function (event ){
0 commit comments