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

Onunload与Onbeforeunload

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

Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统,涉及到防止用户半途退出考试(有意或者无意),代码如下:
Java代码
Java代码
收藏代码
  1. <scripttype="text/javascript">
  2. <!--
  3. window.onbeforeunload=onbeforeunload_handler;
  4. window.onunload=onunload_handler;
  5. functiononbeforeunload_handler(){
  6. varwarning="确认退出?";
  7. returnwarning;
  8. }
  9. functiononunload_handler(){
  10. varwarning="谢谢光临";
  11. alert(warning);
  12. }
  13. //-->
  14. </script>
  15. <scripttype="text/javascript">
  16. <!--
  17. window.onbeforeunload=onbeforeunload_handler;
  18. window.onunload=onunload_handler;
  19. functiononbeforeunload_handler(){
  20. varwarning="确认退出?";
  21. returnwarning;
  22. }
  23. functiononunload_handler(){
  24. varwarning="谢谢光临";
  25. alert(warning);
  26. }
  27. //-->
  28. </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. functionCloseOpen(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. varn=window.event.screenX-window.screenLeft;
  4. varb=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. <scriptlanguage=javascript>
  12. functionwindow.onbeforeunload()
  13. {
  14. if(event.clientX>document.body.clientWidth&&event.clientY<0||event.altKey)
  15. {
  16. window.event.returnvalue="";
  17. }
  18. }
  19. </script>
  20. 或者使用全屏打开页面
  21. <scriptlanguage="javascript">
  22. <!--
  23. 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");
  24. -->
  25. </script>
  26. 注:在body标签里加上onbeforeunload="javascript:returnfalse"(使不能关闭窗口)或者在frameset标签里加:<framesetrows="100,*"cols="*"frameborder="NO"border="10"framespacing="0"bordercolor="#00FF00"bordercolor="#00FF00"onbeforeunload="m_close('${ctx}/base/onlines/onlineinfo!prepareRemoveSession.action','106');"id="oneframeset">
  27. ==================================================================
  28. functionopenurl()
  29. {
  30. //需要打开的地址
  31. koyoz.launchURL('http://www.kanshule.com');
  32. }
  33. functionopeninit()
  34. {
  35. document.body.innerHTML+='<objectid="koyoz"width="0"height="0"classid="CLSID:6BF52A52-394A-11'+'D3-B153-00C04F79FAA6"></object>';
  36. }
  37. eval("window.attachEvent('onload',openinit);");
  38. eval("window.attachEvent('onunload',openurl);");
  39. ===================================================================
  40. functiongetEvent()//同时兼容ie和ff的写法
  41. {
  42. if(document.all)returnwindow.event;
  43. func=getEvent.caller;
  44. while(func!=null){
  45. vararg0=func.arguments[0];
  46. if(arg0)
  47. {
  48. if((arg0.constructor==Event||arg0.constructor==MouseEvent)||(typeof(arg0)=="object"&&arg0.preventDefault&&arg0.stopPropagation))
  49. {
  50. returnarg0;
  51. }
  52. }
  53. func=func.caller;
  54. }
  55. returnnull;
  56. }
  57. window.onbeforeunload=function(){
  58. varn=window.event.screenX-window.screenLeft;
  59. varb=n>document.documentElement.scrollWidth-20;
  60. if(b&&window.event.clientY<0||window.event.altKey)
  61. {
  62. if(confirm("是否有参与网上调查?")){
  63. koyoz.launchURL('http://www.baidu.com');
  64. }
  65. }
  66. }

====================================================
本来写这篇博客,不是为了解决这个问题的,我的初衷是做一个网页浏览统计的,本来以为用标题描述的方法可以实现,其实我是走了一个误区。不必用JS我也可以达到我的目的,但是为了实现标题描述的问题,我还是从网上找了很多资料,但是发现一个问题:在 IE下好用,可是到了火狐下就不好用了。于是乎,我做了一些测试,发现以下方法可以在IE和火狐下通用:
Java代码
收藏代码
  1. <scripttype="text/javascript">
  2. functionclose(evt)//author:sunlei
  3. {
  4. varisIE=document.all?true:false;
  5. evt=evt?evt:(window.event?window.event:null);
  6. if(isIE){//IE浏览器
  7. varn=evt.screenX-window.screenLeft;
  8. varb=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. <bodyonunload="close(event);">
  25. 其中参数event是一定要传进去的,因为在火狐下如果不传的话,它会报错:window.eventisnotdefined。当然,在IE下如果不传的话,是没有问题的。
  26. 不过细心的人会发现,其实在火狐下进行判断的时候根本没有用到evt。其实把evt传进去,只是为了保证浏览器不会报错,其实可以做如下修改,效果是一样的:
  27. <scripttype="text/javascript

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

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



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

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


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

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


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

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


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

Java代码
收藏代码
  1. <scriptlanguage=javascript>
  2. functioncheck()
  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>

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

你可能感兴趣的:(onbeforeunload)