JS监听关闭浏览器事件之Onunload与Onbeforeunload

最新推荐文章于 2021-09-16 11:30:11 发布

君望永远

最新推荐文章于 2021-09-16 11:30:11 发布

阅读量4.1w

点赞数

分类专栏： Web开发

Web开发专栏收录该内容

195 篇文章 1 订阅

订阅专栏

Onunload与Onbeforeunload

Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。

Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统，涉及到防止用户半途退出考试（有意或者无意），代码如下：
Java代码

     Java代码 
    
 <script type="text/javascript">     
 <!--       
     window.onbeforeunload = onbeforeunload_handler;     
     window.onunload = onunload_handler;     
     function onbeforeunload_handler(){     
         var warning="确认退出?";             
         return warning;     
     }     
          
     function onunload_handler(){     
         var warning="谢谢光临";     
         alert(warning);     
     }     
 // -->     
 </script>     
      
   
 <script type="text/javascript">   
 <!--    
 window.onbeforeunload = onbeforeunload_handler;   
 window.onunload = onunload_handler;   
 function onbeforeunload_handler(){   
     var warning="确认退出?";      
 return warning;   
     }   
       
 function onunload_handler(){   
     var warning="谢谢光临";   
     alert(warning);   
     }   
 // -->   
 </script>   

Java代码
这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.

这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.Java代码
通常应用在注销session等等登陆信息等方面....

通常应用在注销session等等登陆信息等方面....Java代码
这里一并推荐一个ActionScript3的好教程: <A href="http://gskinner.com/talks/as3workshop/">http://gskinner.com/talks/as3workshop/</A>

这里一并推荐一个ActionScript3的好教程: http://gskinner.com/talks/as3workshop/写道
运用onunload事件判断浏览器是刷新还是关闭窗口

写道

     Java代码 
    
 function CloseOpen(event) {   
 if(event.clientX<=0 && event.clientY<0) {   
 alert("关闭");   
 }   
 else   
 {   
 alert("刷新或离开");   
 }   
 }   

Java代码

     Java代码 
    
 window.onbeforeunload = function() //author: meizz      
        {      
               var n = window.event.screenX - window.screenLeft;      
               var b = n > document.documentElement.scrollWidth-20;      
               if(b && window.event.clientY < 0 || window.event.altKey)      
               {      
                      alert("是关闭而非刷新");      
                      window.event.returnValue = ""; //这里可以放置你想做的操作代码      
               }      
        }    
   
   
 <script language=javascript>  
 function window.onbeforeunload()  
 {  
   if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)  
   {  
     window.event.returnvalue = "";  
   }  
 }  
 </script>  
   
 或者使用全屏打开页面  
   
 <script language="javascript">  
 <!--  
 window.open(www.32pic.com,"32pic","fullscreen=3,height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");  
 -->  
 </script>  
   
 注：在body标签里加上οnbefοreunlοad="javascript:return false"（使不能关闭窗口）或者在frameset标签里加:<frameset rows="100,*" cols="*" frameborder="NO" border="10" framespacing="0" bordercolor="#00FF00"   bordercolor="#00FF00" οnbefοreunlοad="m_close('${ctx}/base/onlines/onlineinfo!prepareRemoveSession.action','106');" id="oneframeset">  
   
   
 ==================================================================  
   
 function openurl()   
 {   
 //需要打开的地址   
 koyoz.launchURL('http://www.kanshule.com');   
 }   
 function openinit()   
 {   
 document.body.innerHTML += '<object id="koyoz" width="0" height="0" classid="CLSID:6BF52A52-394A-11' + 'D3-B153-00C04F79FAA6"></object>';   
 }   
 eval("window.attachEvent('onload',openinit);");   
 eval("window.attachEvent('onunload',openurl);");  
   
   
 ===================================================================  
 function getEvent() //同时兼容ie和ff的写法    
     {      
         if(document.all)   return window.event;      
         func=getEvent.caller;      
         while(func!=null){      
             var arg0=func.arguments[0];      
             if(arg0)      
             {      
                 if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))      
                 {      
                     return arg0;      
                 }      
             }      
             func=func.caller;      
         }      
         return null;      
     }    
   
   
   
 window.onbeforeunload = function(){   
     var n = window.event.screenX - window.screenLeft;      
     var b = n > document.documentElement.scrollWidth-20;      
     if(b && window.event.clientY < 0 || window.event.altKey)      
     {     
         if(confirm("是否有参与网上调查？")){  
         koyoz.launchURL('http://www.baidu.com');   
         }   
     }      
 }   

====================================================
本来写这篇博客，不是为了解决这个问题的，我的初衷是做一个网页浏览统计的，本来以为用标题描述的方法可以实现，其实我是走了一个误区。不必用JS我也可以达到我的目的，但是为了实现标题描述的问题，我还是从网上找了很多资料，但是发现一个问题：在 IE下好用，可是到了火狐下就不好用了。于是乎，我做了一些测试，发现以下方法可以在IE和火狐下通用：

     Java代码 
    
 <script type="text/javascript">  
 function close(evt) //author: sunlei  
 {  
     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("是关闭而非刷新");  
         }  
         else{  
             alert("是刷新而非关闭");  
         }  
     }  
     else{//火狐浏览器  
         if(document.documentElement.scrollWidth!=0)  
             alert("是刷新而非关闭");  
         else  
             alert("是关闭而非刷新");  
     }  
 }  
 </script>  
 <body οnunlοad="close(event);">  
         其中参数event是一定要传进去的，因为在火狐下如果不传的话，它会报错：window.event is not defined。当然，在IE下如果不传的话，是没有问题的。  
         不过细心的人会发现，其实在火狐下进行判断的时候根本没有用到evt。其实把evt传进去，只是为了保证浏览器不会报错，其实可以做如下修改，效果是一样的：  
 <script type="text/javascript  

===========================================================================

     Java代码 
    
 script language=javascript window.onbeforeunload = function() //author: meizz { var n = window.event.screenX - window.screenLeft; var b = n document.documentElement.scrollWidth-20; if(b window.event.clientY 0 || window.event.altKey) { aler  
   
 <script   language="javascript">    
 window.onbeforeunload   =   function()     //author:   meizz    
 {    
       var   n   =   window.event.screenX   -   window.screenLeft;    
       var   b   =   n   >   document.documentElement.scrollWidth-20;    
       if(b   &&   window.event.clientY   <   0   ||   window.event.altKey)    
       {    
           alert("是关闭而非刷新");    
           window.event.returnValue   =   "";     //这里可以放置你想做的操作代码  
            
       }else{  
           alert("是刷新而非关闭");    
      }    
 }    
 </script>  
   
 <SCRIPT>  
   
 function window.onbeforeunload() {  
            if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){  
              window.event.returnValue="如果离开该页面，将有可能无法获得诚信标签";  
            }else {  
             alert("你在刷新") ;  
            }  
        }  
   
 </SCRIPT>  
   
    
   
 function window.onbeforeunload() {  
            if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){  
              window.event.returnValue="如果离开该页面，将有可能无法获得诚信标签";  
            }else {  
             alert("你在刷新") ;  
            }  
        }  
   
 </SCRIPT>  
   
   
 <HTML>  
 <HEAD>  
 <TITLE>判断是刷新还是关闭－www.51windows.Net</TITLE>  
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
 <META NAME="Author" CONTENT="51windows,海娃,haiwa">  
 <META NAME="Description" CONTENT="Power by 51windows.Net">  
 </HEAD>  
   
 <script>  
 function CloseOpen(event) {  
 if(event.clientX<=0 && event.clientY<0) {  
 alert("关闭");  
 }  
 else  
 {  
 alert("刷新或离开");  
 }  
 }  
 </script>  
 <body οnunlοad="CloseOpen(event)">  
 </BODY>  
 </HTML>  
 <div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">  
 <input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div>  
    

---------------------------------------------------------------------------------------------------------------

     Java代码 
    
 <script language=javascript>    
       function window.onbeforeunload()    
       {    
       if    (event.clientX>document.body.clientWidth       &&       event.clientY<0||event.altKey)  
   
             {    
              window.event.returnValue="确定要退出本页吗？";    
             }   
   
       }  
 </script>  

---------------------------------------------------------------------------------------------------------------

     Java代码 
    
 <script language=javascript>  
 function window.onbeforeunload()  
 {  
 if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)  
 {  
 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
 xmlhttp.open("GET","<%= request.getContextPath()%>" + "/logout.do",false);  
 xmlhttp.send();  
 }  
 }  
 </script>  

---------------------------------------------------------------------------------------------------------------

     Java代码 
    
 <script language=javascript>  
 function check()  
 {  
 if (event.clientX>document.body.clientWidth-20 && event.clientY<0||event.altKey)  
 window.event.returnValue='确定要退出本页吗？';  
 }  
 </script>  
 </head>  
   
 <body οnbefοreunlοad="check();">  
 </body>  

---------------------------------------------------------------------------------------------------------------

     Java代码 
    
 <script   language=javascript>    
 function   check()    
 {    
 if   (event.clientX>document.body.clientWidth-20   &&   event.clientY<0||event.altKey)    
    if(confirm("您确定要离开系统么？"))    
    {    
    window.location.href="logout.jsp";    
     closes.Click();    
     return;    
    }    
    else  
    {  
     window.location.href="main.jsp";    
    }  
 }    
 </script>  