关于js监控onbeforeunload与onunload事件

来源:互联网 发布:西安79家网络诈骗公司 编辑:程序博客网 时间:2024/05/17 05:14

最近在做在线客服的插件项目,遇到一个关于不小心关闭浏览器窗口或者页签的问题..

   搜索了好多文章,有对的 有错的,基本上没有什么有浏览器兼容的文章,就着手自己记录下,感谢我查阅过的文章的作者..

 

  首先,说说刷新和关闭的区别,刷新呢,就是卸载掉本个页面在重新请求一个新的页面,关闭就直接卸载本页面,这样理解了吧。 

  我们再来理解下onbeforeunload和onunload这两个事件的区别:

    onbeforeunload :页面卸载前的处理

    onunload: 得到页面卸载之后的处理

   举个例子:如果是刷新页面,则Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。

 

     两个事件的大体区别应该有一定的理解了吧,这针对开发前台的朋友们应该不是难事..

 

那么 ,我们在说说 怎么监控页面关闭和刷新事件

          监控页面的刷新和关闭,网站上很多关于监控鼠标点击的横纵坐标,这个我就不多说了,我只说一句,监控不完整,作用不大、

     但是,不管是监控横纵坐标还是其他自己模拟页面处理,关闭页面都应该是调用onbeforeunload和onunload这两个事件,知道这两个事件的大作用了吧

 

下面 我就根据不同的浏览器来描述下 怎么使用:

          IE:

window.onbeforeunload = function(){//beforeunload事件中,只能是判断是否需要关闭/刷新前的提示,不能处理业务数据,业务数据交予unload事件处理//return 的值是字符类型,就是我们提示的语句,这个作用就是防止客户不小心点击关闭或浏览器关闭,但是,我们是捕捉不了弹出的确定和取消事件,所以,我们就没法在这直接做验证
return "";}window.onunload = function(){     //处理业务数据}

          FF:  这里 我要说一句,火狐是不支持onunload事件的,这个火狐官网有特定的描述

          window.onbeforeunload = function(e){return "";}
        Google:
     //谷歌和火狐一样 也不支持onunload事件, 并且onbeforeunload事件都要以下列代码的形式才可以,要重新获得,并必须要return "",不然不会触发beforeunload事件,大家可以调试下
<pre class="javascript" name="code">        window.onbeforeunload = function(e){        e = e||window.event;alert("beforeunload");return "";}
    
    
0 0