Onbeforeunload和onunload的深入交流分析(2012.08.23)

       这两天的工作一直围绕着onbeforeunload和onunload在IE、火狐、Chrome的兼容性进行处理。但是仍然没有很多好的进展，我将该分析发到博客上和大家一起分享交流，希望能够得到大家的指导得出一个好的解决方案。

      需求分析：当用户点击系统退出，检测用户所有页面数据是否被修改，给用户一定的提示并在提示以后做系统的一些列操作。

     1、  对于IE和火狐onbeforeunload方法弹出的提示信息，IE能够正确的弹出所修改的提示信息，而火狐弹出来的是自己的onbeforeunload的提示信息，提示信息如下：

IE：

火狐：

这个问题，网上很多人解释是这样的：

没法修改，这是浏览器自身的原因，不同浏览器的内核不一样，实现的效果也不同，而对于这个接口是浏览器提供的，那么不同的浏览器对其有不同的支持也是很正常的，同样是否允许修改也要看浏览器有没有提供这个函数接口；当然处于安全考虑，不允许修改也是有理由的（比如改为“确认关闭将导致系统崩溃”之类）。

对于这个问题我email给了火狐的测试组（可以参考火狐的bugzilla的Id784630），在火狐的document文档中说明Firefox4和更高版本的浏览器返回的字符串是不向用户显示。

参考网址（http://www.cssha.com/onbeforeunload-firefox），

另外可见详细的id分析参考网 址（https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload）。

或许这个问题会有其他办法去很好的处理。

2、      尝试用jquery去进行处理，参考该代码去实现，confirm能够正确的提示所修改的信息，但是不管点击的是确定或者留在此页面上都会退出浏览器，同时窗口会两次弹出。当加上onbeforeunload中需要返回的return语句，火狐的提示信息仍然会使用本身的提示。

代码如下：

$(window).bind('beforeunload',function(){

if(/Firefox[\/\s](\d+)/.test(navigator.userAgent)&&newNumber(RegExp.$1) >=4) {

            if(confirm('message');){

                return  ‘111111111’;

           

            }else{

               window.setTimeout(function(){window.close();}, 1);

            }

        } else{

            return '22222222222222222';

        }

    }

   

);

 

3、IE 浏览器关闭以后onunload不工作

对于火狐假如点击了onbeforeunload的确定，浏览器就会关闭，onunload的代码一切和window的代码都不能执行（例如：window.opener=null;

                                       window.open(' ', '_self',' ');

                                       window.close();）

但是alert等不使用到window对象操作的可以执行。我的观点是当用户点击确定离开页面以后所有的window对象已经被销毁，所以对于window系列操作不会起任何作用，考虑该如何在onunload中加入代码（如ajax）去做一些逻辑处理，比如关闭一些东西或者对session进行一些操作。

 

4、对于判断用户是点击了浏览器关闭（Alt+F4关闭、直接关闭浏览器、关闭该窗口选项）还是只点击了刷新（F5刷新、窗口选项刷新、地址栏刷新）分析。

测试代码：

       <script type="text/javascript">

function closed(evt) 

{ 

         var isIE=document.all?true:false; 

         evt = evt ? evt :(window.event ?window.event : null); 

      if(isIE){//IE浏览器 

        var n = evt.screenX -window.screenLeft; 

        var b = n >document.documentElement.scrollWidth-20; 

        if(b &&evt.clientY<0 || evt.altKey){

            alert("IE关闭"); 

       } 

        else{ 

           alert("IE刷新"); 

        } 

   } 

    else{//火狐浏览器

      alert(document.documentElement.scrollWidth);

        if(document.documentElement.scrollWidth!=0) 

            alert("火狐刷新");

        else

            alert("火狐关闭"); 

    } 

} 

</script>

当采用onunload去加载该事件的时候，能够判断出用户是刷新还是关闭（IE9关闭好像判断不出来，需要验证）。当采用onbeforeunload去加载该事件的时候，却不能判断出用户是刷新还是关闭，在火狐中当刷新或者关闭的时候会弹出onbeforeunload的对话框要求用户选择是离开还是留在此页面，这个时候取得的document.documentElement.scrollWidth仍然是原先的数据，所以判断不了他是刷新还是关闭。

 

网上的各位技术大牛们，或许你们也遇到过这样的用户需求，你们是怎么样去解决的，很希望你们能够拿出你们的分析和解决方案来进行交流和探讨。

相关查阅的参考博文：

http://primarykeylw.iteye.com/blog/1568120

http://www.cssha.com/tag/onbeforeunload

http://hi.baidu.com/melianyu/blog/item/51cc3b822be4e3b56c8119be.html

http://topic.csdn.net/t/20060208/12/4545081.html