本文共 1909 字,大约阅读时间需要 6 分钟。
unload和beforeunload是在窗口卸载的时候会触发,可以在用户刷新或者关闭窗口的时候处理一些逻辑,如果在两个事件监听中添加 alert、confirm、prompt会忽略,所以我们想提示用户或者想调试一下这种方法是不可行的,要是在事件中添加debugger,窗口关闭的时候可以跟进断点,但是刷新的时候断点也被忽略了。废话少说直接上测试代码
//以两种方式去绑定事件,事件触发写在本地存储中window.onunload = function(){ localStorage.setItem("onunload","window.unload");}window.onbeforeunload = function(){ localStorage.setItem("onbeforeunload","window.beforeunload");} window.addEventListener('unload', ()=>{ localStorage.setItem("unload","addEventListener.unload");});window.addEventListener('beforeunload', ()=>{ localStorage.setItem("beforeunload","addEventListener.beforeunload");});
来看一下在Chrome浏览器中的测试结果(刷新关闭效果一样)
在看一下在Firefox中的测试结果(刷新关闭效果一样)
IE请自行测试吧。那结论就是,都会触发beforeunload和unload事件,但是两者唯一的区别就是,对于Firefox来说永远先执行window.onbeforeunload然后在执行add绑定的beforeunload,unload两者一致。想了解更多点击。
顺带在补充一点吧,我们平时如果有一些socket连接,或者需要大量计算,当我们考虑到浏览器关闭或窗口隐藏切换节省性能时,我们可以监听窗口的状态去暂停一些计算或者请求
document.addEventListener('visibilitychange', ()=>{ if(document.visibilityState === 'hidden') { console.log('检测当前浏览器为关闭状态'); } else { console.log('检测当前浏览器为开启状态'); });
---------- 2019.07.01----------
今天在刷知乎的时候看到一篇页面卸载发送Ajax请求的文章,所以也想把学习的补充进来,我们首先想到的就是
var oAjax = new XMLHttpRequest(); oAjax.open('POST', 'http://127.0.0.1:8686/user/register', false); oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); oAjax.onreadystatechange = function() { if(oAjax.readyState == 4 && oAjax.status == 200) { console.log(oAjax.responseText); } else { console.log(oAjax); }}; oAjax.send('a=1&b=2');
还有一种方法
window.addEventListener("beforeunload", function(event) { var blob = new Blob(['room_id=123'], { type: 'application/x-www-form-urlencoded' }); navigator.sendBeacon("http://127.0.0.1:8686/user/register", blob);});
根据知乎作者的意思,当浏览器触发unload时会abort文档,所以他设置同步的ajax请求,但是这样会导致用户体验不友好,关闭有延迟,我在测试时在beforeunload中同步异步均可收到页面的请求。navigator.sendBeacon是一个相对保险的,它主要就是为了这种情况而建立的。
参考链接:
转载地址:https://blog.csdn.net/weixin_38361925/article/details/83003657 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!