js 浏览器窗口 刷新关闭事件

Posted 2020-12-18 三高娘子

1、beforeunload

当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

2、onbeforeunload

当窗口即将被卸载（关闭）时,会触发该事件.此时页面文档依然可见,且该事件的默认动作可以被取消。

各大浏览器测试结果：

火狐浏览器
刷新时：先执行 onbeforeunload ，新页面即将替换旧页面时 onunload ，最后 onload ;
关闭时：只执行 onbeforeunload

谷歌浏览器
刷新时：先执行 onbeforeunload ，新页面即将替换旧页面时 onunload ，最后 onload ;
关闭时：先执行 onbeforeunload ，再执行 onunload.
小窗口关闭：先执行 onbeforeunload ，onunload

MicsoftEdge浏览器
刷新时：先执行 onbeforeunload ，新页面即将替换旧页面时 onunload ，最后 onload ;
关闭时：只执行 onbeforeunload

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362

IE浏览器
刷新时：先执行 onbeforeunload ，新页面即将替换旧页面时 onunload ，最后 onload ;
关闭时：只执行 onbeforeunload

360浏览器
刷新时：先执行 onbeforeunload ，再执行 onload ;
关闭时：只执行 onbeforeunload

window.onload = function(){
    console.log(‘unload操作===========================unload操作‘);
    var userAgent = navigator.userAgent;
    var flag = userAgent.indexOf(‘Firefox‘) > -1 ? true : false;
    window.onunload = function() {
        console.log(‘ooooooooooooooooo操作‘);
        if(!flag){
            console.log(‘ooooooooooooooooo操作‘);
        }else{

        }
    };

    window.onbeforeunload = function () {
        console.log(‘bbbbbbbbbbbbbbbbb操作‘);
        if(flag){
            console.log(‘bbbbbbbbbbbbbbbbb操作‘);
        }else{
            
        }
    };
}

View Code