`

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实现监听页面的刷新与关闭，可在用户刷新或关闭窗口时执行相关操作。

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

    本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考，具体如下： 方式一：(适用于IE浏览器，而且刷新不提示，只在点击浏览器关闭按钮的时候提示) [removed] [removed]=onclose; function ...

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

    今天小编就为大家分享一篇vuejs中监听窗口关闭和窗口刷新事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

    react-beforeunload:React组件和挂钩，侦听beforeunload窗口事件

    卸载前ReactReact组件和钩子，侦听窗口事件。用法useBeforeunload挂钩（推荐） useBeforeunload ( handler ) ;参数handler函数来调用BeforeUnloadEvent时beforeunload事件。例子import { useBeforeunload } from '...

    js 冒泡事件与事件监听使用分析

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 查看运行效果 事件监听 事件监听准确一点讲可以说是js引擎对用户鼠标、键盘、窗口事件等动作的监视进行的操作，也就是针对用户相应的操作进行附加事件，常用的类似 ...

    Firefox中beforeunload事件的实现缺陷浅析

    beforeunload 指在页面卸载前提供的最后一次JS执行的机会

    无刷新上传文件并返回自定义值

    今天开发过程中遇到了这样一个问题：需要将Excel上传至服务器进行解析，但是在...iframe之前设置为隐藏，所以页面不会有变化，然后我们需要监听iframe内容的变化，然后将内容传入主窗口中的JS方法进行下一步的自定义处

    c认证web进阶dom与bom

    监听器 更改样式 事件自增 鼠标事件 1、常用鼠标事件 2、常用键盘事件 3、常用键盘事件属性 this使用输出本身 同上 弹窗 窗口事件 1、常用鼠标事件 过程 BOM 1、BOM结构 2、window对象 3、location...

    IBM WebSphere Portal门户开发笔记01

    33、JS判断IE是关闭还是刷新 305 34、JS与浏览器类型以及版本 306 35、WINDOW NAVIGATOR的一些使用 310 36、进入页面自动播放音频文件 311 37、进入页面自动最大化 312 38、状态栏动态显示时间 312 39、HTML设置页面...

    课程设计基于Vue+Echart框智实现的慧城市大屏可视化系统源码+项目说明(含后台管理系统源码).tar

    在监听窗口小大的模块，使用了防抖函数来控制更新频率，节约浏览器性能。 项目配置了默认的 ECharts 图表样式，文件地址：`common/echart/theme.json`。 封装的渲染图表组件支持传入以下参数，可根据业务需求自行...

    scrat-pagelet-demo:scrat seo 模式 http 演示

    scrat后端渲染Webapp模式示例...pagelet-demoscrat release -cwL启动本地调试服务器注意，这里最好新开一个命令窗口，不要关闭上一步中的命令，它在监听文件修改，并帮助你自动刷新浏览器！scrat server start访问页面

    超实用的jQuery代码段

    1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...

    HTML5-Canvas-based-Compass-and-mouse-tracker:这是一个基于地图和指南针的概念，使用 HTML5 Canvas、CSS3 和 Javascipt 创建，并带有修改的 jQueryRotate 库

    我们在 mainCanvas 上添加了鼠标位置 mousemove 监听器来检测指针的位置。 后来我们通过 jQueryRotate 库在各自的方向移动了指针。 由创建 函数onResize有助于根据窗口更改画布的尺寸。 每个画布对象上的绘制功能...

    flex3的cookbook书籍完整版dpf（包含目录）

    3.18 节使用可关闭Tabs 创建一个TabNavigator 3.19 节创建和控制Alert 3.20 节根据呼出组件设置对话框的尺寸和位置 3.21 节管理多个弹出对话框 3.22 节在容器中滚动到某个指定的子组件 3.23 节使用IdeferredInstance...

    java源码包---java 源码 大量 实例

    　用JAVA编写了一个小工具，用于检测当前显示器也就是显卡的显示模式，比如分辨率，色彩以及刷新频率等。 Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 　Java波浪文字，一个利用...

    java源码包2

    　用JAVA编写了一个小工具，用于检测当前显示器也就是显卡的显示模式，比如分辨率，色彩以及刷新频率等。 Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 　Java波浪文字，一个利用...

    vc++ 应用源码包_1

    任务管理器应该大家都很熟悉，论坛里也有好多的任务管理器的源码，解决CListCtr刷新时滚动条跳到开始处。 VC++实现网络连接查看器源码 非常好的一个实例，把网络连接的UDP/TCP都插入到CList控件中显示出来。 VC++...

    vc++ 应用源码包_2

    任务管理器应该大家都很熟悉，论坛里也有好多的任务管理器的源码，解决CListCtr刷新时滚动条跳到开始处。 VC++实现网络连接查看器源码 非常好的一个实例，把网络连接的UDP/TCP都插入到CList控件中显示出来。 VC++...

    vc++ 应用源码包_6

    任务管理器应该大家都很熟悉，论坛里也有好多的任务管理器的源码，解决CListCtr刷新时滚动条跳到开始处。 VC++实现网络连接查看器源码 非常好的一个实例，把网络连接的UDP/TCP都插入到CList控件中显示出来。 VC++...

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