onpagehide、onunload 和 onpageshow、onload事件疑惑

时间:2023-12-15 14:06:14

今天在最新版本chrome浏览器中测试在什么情况下会触发onpagehide、onunload事件(点击一个链接,刷新页面,提交表单,关闭浏览器等)。测试代码粘贴如下:

<!DOCTYPE html>
<html lang='en'>
<head>
<title>测试</title>
<meta charset='utf-8'>
<script type="text/javascript">
function onpageshowfunc() {
alert("onpageshow()");
}
function onloadfunc() {
alert("onloadfunc()");
}
function onunloadfunc() {
console.log("2222222222");
alert("onunloadfunc()");
}
function onpagehidefunc() {
console.log("111111111");
alert("onpagehide()");
}
</script>
</head>
<body onunload="onunloadfunc()" onpagehide="onpagehidefunc()" onpageshow="onpageshowfunc()" onload="onloadfunc()" >
<a href="http://www.baidu.com">test link baidu</a>
</body>
</html>

结果意外发现:

1、onpagehide onunload事件是在销毁页面对象后触发的,onbeforeunload是在销毁页面对象前触发的 ,此时alert()方法已经被锁定销毁了,因而一直不能弹出提示框了,后来断点提示一个错误输出“Blocked alert('onpagehide()') during pagehide.”。“Blocked alert('onunloadfunc()') during unload.”

2、onpagehide比onunload先触发。

3、onload比onpageshow先触发。

以上仅自己结论,欢迎指正。