页面关闭事件的监听onbeforeunload/unload/p
2021-06-23 本文已影响0人
IamaStupid
<body>
<h1>测试关闭浏览器触发事件</h1>
<a href="http://www.baidu.com">跳转self</a>
<a href="http://www.baidu.com" target="_blank">跳转blank</a>
<script>
// chrome中点击tab的叉叉或者点击浏览器的叉叉，都可以触发
// 可以打断点或debugger进行测试
window.onbeforeunload = function (event) {
console.log(event)
alert('onbeforeunload') // 不会执行
window.open('www.baidu.com') // 不会执行
}
// chrome中点击tab的叉叉或者点击浏览器的叉叉，都可以触发
// 可以打断点或debugger进行测试
window.onunload = function (event) {
console.log(event)
alert('onunload') // 不会执行
}
// 刷新页面后断点好像捕捉不到，但是查看locastorage，确实已经添加了'aaa'
// 但是隐藏tab，或者收起浏览器，并不会触发，跳转self和刷新页面触发了
window.onpagehide = function (event) {
console.log(event)
window.localStorage.setItem('aaa', 'aaaa')
alert('onpagehide') // 不会执行
}
// 每次进入页面都会触发
// onload事件不同的是：由于浏览器“往返缓存”（back-forward cache，或bfcache），前进后腿按钮不会触发onload,但是pageshow依然会触发
// bfcatche 可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度
window.onpageshow = function (params) {
console.log('onpageshow')
// window.localStorage.setItem('bbbbb', 'bbbbb')
alert('onpageshow') // 会执行
}
// 页面正常进入的时候，会先触发onload,再触发pageshow，但是前进后退，不会触发onload
window.onload = function (params) {
console.log('onload')
alert('onload') // 会执行
}
</script>
</body>
pageshow/pagehide手机端浏览器应用：https://cnblogs.com/zengfp/p/9910473.html
