`

js监听窗口刷新关闭

窗口关闭窗口刷新 
阅读更多

Onunload与Onbeforeunload 

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

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

Java代码  收藏代码
  1. <script type="text/javascript">     
  2. <!--       
  3.     window.onbeforeunload = onbeforeunload_handler;     
  4.     window.onunload = onunload_handler;     
  5.     function onbeforeunload_handler(){     
  6.         var warning="确认退出?";             
  7.         return warning;     
  8.     }     
  9.          
  10.     function onunload_handler(){     
  11.         var warning="谢谢光临";     
  12.         alert(warning);     
  13.     }     
  14. // -->     
  15. </script>     
  16.      
  17.   
  18. <script type="text/javascript">   
  19. <!--    
  20. window.onbeforeunload = onbeforeunload_handler;   
  21. window.onunload = onunload_handler;   
  22. function onbeforeunload_handler(){   
  23.     var warning="确认退出?";      
  24. return warning;   
  25.     }   
  26.       
  27. function onunload_handler(){   
  28.     var warning="谢谢光临";   
  29.     alert(warning);   
  30.     }   
  31. // -->   
  32. </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代码  收藏代码
  1. function CloseOpen(event) {   
  2. if(event.clientX<=0 && event.clientY<0) {   
  3. alert("关闭");   
  4. }   
  5. else   
  6. {   
  7. alert("刷新或离开");   
  8. }   
  9. }   



  Java代码 

Java代码  收藏代码
  1. window.onbeforeunload = function() //author: meizz      
  2.        {      
  3.               var n = window.event.screenX - window.screenLeft;      
  4.               var b = n > document.documentElement.scrollWidth-20;      
  5.               if(b && window.event.clientY < 0 || window.event.altKey)      
  6.               {      
  7.                      alert("是关闭而非刷新");      
  8.                      window.event.returnValue = ""; //这里可以放置你想做的操作代码      
  9.               }      
  10.        }    
  11.   
  12.   
  13. <script language=javascript>  
  14. function window.onbeforeunload()  
  15. {  
  16.   if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)  
  17.   {  
  18.     window.event.returnvalue = "";  
  19.   }  
  20. }  
  21. </script>  
  22.   
  23. 或者使用全屏打开页面  
  24.   
  25. <script language="javascript">  
  26. <!--  
  27. 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");  
  28. -->  
  29. </script>  
  30.   
  31. 注：在body标签里加上onbeforeunload="javascript:return false"（使不能关闭窗口）或者在frameset标签里加:<frameset rows="100,*" cols="*" frameborder="NO" border="10" framespacing="0" bordercolor="#00FF00"   bordercolor="#00FF00" onbeforeunload="m_close('${ctx}/base/onlines/onlineinfo!prepareRemoveSession.action','106');" id="oneframeset">  
  32.   
  33.   
  34. ==================================================================  
  35.   
  36. function openurl()   
  37. {   
  38. //需要打开的地址   
  39. koyoz.launchURL('http://www.kanshule.com');   
  40. }   
  41. function openinit()   
  42. {   
  43. document.body.innerHTML += '<object id="koyoz" width="0" height="0" classid="CLSID:6BF52A52-394A-11' + 'D3-B153-00C04F79FAA6"></object>';   
  44. }   
  45. eval("window.attachEvent('onload',openinit);");   
  46. eval("window.attachEvent('onunload',openurl);");  
  47.   
  48.   
  49. ===================================================================  
  50. function getEvent() //同时兼容ie和ff的写法    
  51.     {      
  52.         if(document.all)   return window.event;      
  53.         func=getEvent.caller;      
  54.         while(func!=null){      
  55.             var arg0=func.arguments[0];      
  56.             if(arg0)      
  57.             {      
  58.                 if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))      
  59.                 {      
  60.                     return arg0;      
  61.                 }      
  62.             }      
  63.             func=func.caller;      
  64.         }      
  65.         return null;      
  66.     }    
  67.   
  68.   
  69.   
  70. window.onbeforeunload = function(){   
  71.     var n = window.event.screenX - window.screenLeft;      
  72.     var b = n > document.documentElement.scrollWidth-20;      
  73.     if(b && window.event.clientY < 0 || window.event.altKey)      
  74.     {     
  75.         if(confirm("是否有参与网上调查？")){  
  76.         koyoz.launchURL('http://www.baidu.com');   
  77.         }   
  78.     }      
  79. }   


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

Java代码  收藏代码
  1. <script type="text/javascript">  
  2. function close(evt) //author: sunlei  
  3. {  
  4.     var isIE=document.all?true:false;  
  5.     evt = evt ? evt :(window.event ? window.event : null);  
  6.     if(isIE){//IE浏览器  
  7.         var n = evt.screenX - window.screenLeft;  
  8.         var b = n > document.documentElement.scrollWidth-20;  
  9.         if(b && evt.clientY<0 || evt.altKey){  
  10.             alert("是关闭而非刷新");  
  11.         }  
  12.         else{  
  13.             alert("是刷新而非关闭");  
  14.         }  
  15.     }  
  16.     else{//火狐浏览器  
  17.         if(document.documentElement.scrollWidth!=0)  
  18.             alert("是刷新而非关闭");  
  19.         else  
  20.             alert("是关闭而非刷新");  
  21.     }  
  22. }  
  23. </script>  
  24. <body onunload="close(event);">  
  25.         其中参数event是一定要传进去的，因为在火狐下如果不传的话，它会报错：window.event is not defined。当然，在IE下如果不传的话，是没有问题的。  
  26.         不过细心的人会发现，其实在火狐下进行判断的时候根本没有用到evt。其实把evt传进去，只是为了保证浏览器不会报错，其实可以做如下修改，效果是一样的：  
  27. <script type="text/javascript  


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

Java代码  收藏代码
  1. 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  
  2.   
  3. <script   language="javascript">    
  4. window.onbeforeunload   =   function()     //author:   meizz    
  5. {    
  6.       var   n   =   window.event.screenX   -   window.screenLeft;    
  7.       var   b   =   n   >   document.documentElement.scrollWidth-20;    
  8.       if(b   &&   window.event.clientY   <   0   ||   window.event.altKey)    
  9.       {    
  10.           alert("是关闭而非刷新");    
  11.           window.event.returnValue   =   "";     //这里可以放置你想做的操作代码  
  12.            
  13.       }else{  
  14.           alert("是刷新而非关闭");    
  15.      }    
  16. }    
  17. </script>  
  18.   
  19. <SCRIPT>  
  20.   
  21. function window.onbeforeunload() {  
  22.            if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){  
  23.              window.event.returnValue="如果离开该页面，将有可能无法获得诚信标签";  
  24.            }else {  
  25.             alert("你在刷新") ;  
  26.            }  
  27.        }  
  28.   
  29. </SCRIPT>  
  30.   
  31.    
  32.   
  33. function window.onbeforeunload() {  
  34.            if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey){  
  35.              window.event.returnValue="如果离开该页面，将有可能无法获得诚信标签";  
  36.            }else {  
  37.             alert("你在刷新") ;  
  38.            }  
  39.        }  
  40.   
  41. </SCRIPT>  
  42.   
  43.   
  44. <HTML>  
  45. <HEAD>  
  46. <TITLE>判断是刷新还是关闭－www.51windows.Net</TITLE>  
  47. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
  48. <META NAME="Author" CONTENT="51windows,海娃,haiwa">  
  49. <META NAME="Description" CONTENT="Power by 51windows.Net">  
  50. </HEAD>  
  51.   
  52. <script>  
  53. function CloseOpen(event) {  
  54. if(event.clientX<=0 && event.clientY<0) {  
  55. alert("关闭");  
  56. }  
  57. else  
  58. {  
  59. alert("刷新或离开");  
  60. }  
  61. }  
  62. </script>  
  63. <body onunload="CloseOpen(event)">  
  64. </BODY>  
  65. </HTML>  
  66. <div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">  
  67. <input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div>  
  68.    




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

Java代码  收藏代码
  1. <script language=javascript>    
  2.       function window.onbeforeunload()    
  3.       {    
  4.       if    (event.clientX>document.body.clientWidth       &&       event.clientY<0||event.altKey)  
  5.   
  6.             {    
  7.              window.event.returnValue="确定要退出本页吗？";    
  8.             }   
  9.   
  10.       }  
  11. </script>  



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

Java代码  收藏代码
  1. <script language=javascript>  
  2. function window.onbeforeunload()  
  3. {  
  4. if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)  
  5. {  
  6. var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
  7. xmlhttp.open("GET","<%= request.getContextPath()%>" + "/logout.do",false);  
  8. xmlhttp.send();  
  9. }  
  10. }  
  11. </script>  



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

Java代码  收藏代码
  1. <script language=javascript>  
  2. function check()  
  3. {  
  4. if (event.clientX>document.body.clientWidth-20 && event.clientY<0||event.altKey)  
  5. window.event.returnValue='确定要退出本页吗？';  
  6. }  
  7. </script>  
  8. </head>  
  9.   
  10. <body onbeforeunload="check();">  
  11. </body>  



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

Java代码  收藏代码
  1. <script   language=javascript>    
  2. function   check()    
  3. {    
  4. if   (event.clientX>document.body.clientWidth-20   &&   event.clientY<0||event.altKey)    
  5.    if(confirm("您确定要离开系统么？"))    
  6.    {    
  7.    window.location.href="logout.jsp";    
  8.     closes.Click();    
  9.     return;    
  10.    }    
  11.    else  
  12.    {  
  13.     window.location.href="main.jsp";    
  14.    }  
  15. }    
  16. </script>  
分享到：
| js 监听窗口关闭和刷新
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS针对浏览器窗口关闭事件的监听方法集锦

    在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....

    js监听页面的刷新与关闭

    使用javascript实现监听页面的刷新与关闭，可在用户刷新或关闭窗口时执行相关操作。

    vuejs中监听窗口关闭和窗口刷新事件的方法

    以下是关于如何在Vue.js项目中实现监听窗口关闭和刷新事件的一些方法和知识点。 1. 使用window.onbeforeunload事件 在原生JavaScript中，可以使用window.onbeforeunload事件来监听窗口关闭和刷新的行为。该事件会在...

    JS区分浏览器页面是刷新还是关闭

    在Web开发中，区分浏览器页面是刷新还是关闭的需求非常常见，这主要是为了优化用户体验和保证系统的操作逻辑。传统的做法是使用BOM（Browser Object Model）事件中的onbeforeunload事件，该事件会在页面即将卸载前...

    判断浏览器是刷新还是关闭窗口

    在网页中，刷新页面与关闭窗口虽然都会触发 `onunload` 事件，但我们可以通过监听其他事件来区分这两种情况。 1. **监听 `onbeforeunload` 事件** `onbeforeunload` 事件在 `onunload` 之前触发，并且可以被用来...

    JS监听关闭浏览器事件

    ### JS监听关闭浏览器事件 在Web开发中，有时我们需要对用户关闭浏览器窗口或标签页的行为进行监测，并在这些行为发生前执行某些操作。这通常涉及到`onbeforeunload`和`onunload`这两个事件处理程序。 #### 1. `...

    使用javascript验证窗口是关闭还是刷新

    ### 使用JavaScript验证窗口是关闭还是刷新 在Web开发过程中，我们常常需要监控用户与网页的交互行为，包括但不限于用户关闭浏览器窗口、刷新页面等动作。这些事件对于网站来说非常重要，可以用于实现各种功能，...

    基于JavaScript判断浏览器到底是关闭还是刷新(超准确)

    本文介绍了通过JavaScript判断浏览器是关闭还是刷新的方法。在Web开发过程中，有时候需要区分用户是关闭了浏览器窗口，还是仅仅刷新了页面，这对于执行某些特定的逻辑操作是很重要的。例如，当用户关闭浏览器窗口时...

    窗口刷新父窗口然后关闭

    在Web前端开发领域中，"窗口刷新父窗口然后关闭"是一个在特定操作后常用的功能实现。例如，在一些需要即时数据更新的场景下，用户在完成某项操作后，我们不仅需要关闭当前操作窗口，还要确保父窗口的数据得到了更新...

    模态窗口关闭时刷新父页面js文件

    当我们需要在用户关闭模态窗口后刷新其父页面时，JavaScript（简称js）提供了解决方案。 在JavaScript中，我们可以利用事件监听来处理模态窗口关闭的事件。首先，我们需要在模态窗口上设置一个关闭按钮，并为其添加...

    js监控IE火狐浏览器关闭、刷新、回退、前进事件.docx

    ### JS监控IE与火狐浏览器关闭、刷新、回退、前进事件 #### 一、引言 在Web应用开发过程中，有时需要对用户的浏览器行为进行监控，比如浏览器的关闭、刷新、前进或后退等操作。这对于提高用户体验、确保应用程序...

    JS 关闭或刷新窗口时发生的事件

    通过上述示例，我们可以了解到在JavaScript中如何监听和响应窗口关闭或刷新事件，以及如何在这些事件中执行相应的操作。实际应用中，可能还需要根据不同的浏览器和安全策略进行调整，确保代码的兼容性和可靠性。在...

    jsp与javascript配合,父窗口与子窗口之间刷新

    - **通过消息传递**：使用`window.postMessage()` API，子窗口可以向父窗口发送消息，父窗口监听`message`事件，接收到消息后执行刷新操作。 - **设置父窗口URL参数**：子窗口可以更改父窗口的URL，添加或改变查询...

    Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求

    在Vue框架中，实现监听窗口关闭事件并在关闭前发送请求的功能，对于需要在用户离开页面之前进行某些清理或保存数据的操作尤为重要。本文将详细介绍如何在Vue项目中实现这一功能，并提供相应的代码示例。 ### 监听...

    Vue监听页面刷新和关闭功能

    本文将详细介绍如何使用Vue.js监听页面刷新和关闭事件，以及如何结合JavaScript事件来实现这一功能。 首先，Vue的生命周期钩子函数是处理这类问题的关键。在Vue组件中，`beforeDestroy`生命周期钩子可以用来在组件...

    javascript判断页面是否是刷新还是关闭

    1. `beforeunload` 事件：当用户尝试离开当前页面时（如点击刷新按钮、关闭窗口或导航到另一个URL），浏览器会先触发`beforeunload`事件。这是一个预卸载事件，允许开发者进行确认操作，比如询问用户是否确定要离开...

    javascript无刷新窗口，鼠标壳拖动窗口位置

    在JavaScript编程中，实现无刷新窗口以及允许用户通过鼠标拖动窗口位置的技术是现代Web应用中常见的需求。这种功能能够提供更加流畅和交互性强的用户体验，尤其适用于弹出框、对话框或者浮动面板等元素。以下是对这...

Magicbox
Global site tag (gtag.js) - Google Analytics