js获取关闭浏览器事件

Posted ︶ㄣ霞光里

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js获取关闭浏览器事件相关的知识，希望对你有一定的参考价值。

很多时候我们都在困扰，如何捕获浏览器关闭事件，网上虽然有很多方法，但都不理想，后来终于找到了一个很好地实现方法，大家可以试试。

Onunload与Onbeforeunload
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。
区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。 
Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；
而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。

下面是JavaScript代码：
/*
 * 使用window.onbeforeunload获取关闭事件，但是这个事件a标签跳转也会调用，
 * 所以通过flag标识为false时，href跳转后禁用后续的onclick事件。
 * */
var isOnloadFlag = $(‘#isOnloadFlag‘).val(); //默认是true
//所有的a标签添加class 属性onUnload，点击a标签的时候通过参数移除onbeforeunload事件

$(".onUnload").on("click", function (e) {    
    //$(this).removeAttr("onclick"); //这个移除不了onbeforeunload事件
    //var flag = $(‘#isOnloadFlag‘).val();
    isOnloadFlag = false;
    var url = $(‘.onUnload‘).attr(‘href‘);
    window.location.href = url;
});
//
window.onbeforeunload = function(e){
    var flagThis = $(‘#isOnloadFlag‘).val();
    var flagbefore = isOnloadFlag;
    if(flagThis&&flagbefore){        
        $.getJSONNoCache("/onUnload.action","GET",{},"text",false,function(data){
            if(data)
            {    
                    //这里写自己的代码                
            }
            else
            {
            }                    
        },function(){
        });  
    }
}

window.onunload = onunload_handler;    
function onunload_handler(){   
    $.getJSONNoCache("/onUnload.action","GET",{},"text",false,function(data){
        if(data)
            {                                
            }
        else
            {
            }                    
    },function(){    
    });  
}

经过测试，谷歌和火狐是支持的。

 

以上是关于js获取关闭浏览器事件的主要内容，如果未能解决你的问题，请参考以下文章

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

如何用JS捕捉 浏览器关闭事件，我想在浏览器关闭的时候记录一些日志。要兼容Firefox和IE 6、7、8 ！3Q....

JS——浏览器关闭事件

监听浏览器关闭事件

JS监听关闭浏览器事件

如何使用 React js 检测浏览器标签关闭事件？