<!doctype html> <html> <head> <title>堆代码 duidaima.com</title> <script> window.addEventListener("beforeunload", function (event) { console.log("即将卸载"); }); window.addEventListener("unload", function (event) { console.log("卸载"); }); </script> </head> <body> ConardLi ... </body> </html>一般我们会用于以下场景:
3.发送分析:在离开页面时发送与用户交互相关的数据。
document.addEventListener('visibilitychange', function() { if (document.visibilityState === 'visible') { // 堆代码 duidaima.com // 页面变为可见状态时的操作 console.log('页面可见'); } else if (document.visibilityState === 'hidden') { // 页面变为不可见状态时的操作 console.log('页面不可见'); } });第二个替代事件为 pagehide ,它会在用户点击跳转其他链接、前进或后退按钮,或关闭浏览器选项卡时触发,也能够用来确定用户什么时候离开界面:
window.addEventListener('pagehide', function(event) { console.log('页面即将隐藏或关闭'); // 执行相应的操作 });pagehide 不会像 unload 一样让页面不符合bfcache (浏览器的前进,后退,缓存操作)的条件。
Permissions-Policy: unload=()递归地禁用当前页面及其所有子 iframe 的 unload事件,但是想保留部分页面的:
Permissions-Policy: unload=(https://www.duidaima.com)只是上知道网站上是否有调用 unload 事件,但不进行拦截:
Permissions-Policy-Report-Only: unload=()