捕捉网页关闭与取消关闭事件

javascript捕获窗口关闭事件 有两种方法

1.重新定义 window.onbeforeunload () 事件

window.onbeforeunload = function () {
  alert("关闭窗口");	
}
 

该方法使用于 ie firefox (opera 不行)
alert()事件将会在关闭窗口前执行,你也可以用户决定是否关闭窗口

function window.onbeforeunload() {
if (event.clientX>document.body.clientWidth && event.clientY<0 ||event.altKey)
      window.event.returnValue="确定要退出本页吗?";
}

 

 

IE下 onbeforeunload  刷新 不执行相关操作

 

	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) {
			//alert("是关闭而非刷新");
			window.event.returnValue = "确定要离开?";
		} else {
			alert("是刷新而非关闭");
		}
	}
 

 



2.用onUnload 方法

在body 标签里加入onUnload事件

body onUnload="myClose()"

然后在javascript里定义myClose()方法

但是onUnload方法是在关闭窗口之后执行,不是在关闭窗口之前执行,如果你想在关闭窗口之前做判断,请用第一种方法

在做Web开发时,我们经常用到页面关闭事件onbeforeunload,可以给用户一个选择放弃关闭的机会,就比如这个博客编辑器。如果用户选择了离开,那么onunload事件自然会触发;但若用户选择了取消,又该如何检测呢?

我们假定一个页面离开取消事件,叫做onunloadcancel。显然,这个事件应触发在用户按下对话框的取消按钮之后。但关闭提示对话框的触发流程并不是那么简单。我们先来回顾下这个过程:
     window.onbeforeunload = function ()
     {
         return "真的离开?" ;
     }

当用户准备离开页面(比如按下关闭按钮,或者刷新页面等等),onbeforeunload事件触发。我们的脚本无法在这个事件里决定是否 阻止页面的关闭,唯一能做到的只有返回一个字符串,这个字符串仅作为说明文字出现在关闭选择对话框里,用户可以选择关闭,或者不关闭。但究竟选择哪个,我 们无从得知。

然而仔细分析下这个问题,其实不然。 如果用户真选择了关闭页面,那么之后所有的运行代码都byebye了;而继续留在页面的话,就当什么都没发生过,除了onbeforeunload事件。 所以,我们在onbeforeunload事件里做点小花招,在此注册个几毫秒之后启动的定时器,如果页面真关闭了,那么这个定时器当然是作废了;那么页 面还在,几毫秒的延时对于这个本来就是异步的界面交互事件也没有什么误差。
     <script language= "JavaScript" >
     window.onbeforeunload = function ()
     {
          setTimeout(onunloadcancel, 10);
          return "真的离开?" ;
     }
    
     window.onunloadcancel = function ()
     {
          alert( "取消离开" );
     }
     </script>

我们使用setTimeout,延时10ms执行onunloadcancel。如果页面真关闭了,定时器当然都销毁;反之继续。但在测试中,发现FireFox有个两个BUG:

    有时按下关闭按钮,也会执行onunloadcancel,并且有个对话框一闪而过。如果换成while(1);浏览器会一直卡死,这说明onunloadcancel确实是执行了,只是销毁了界面,但并没有暂停脚本的运行。
    如果是通过刷新页面的方式离开,仅执行一次onbeforeunload,但点击X按钮关闭页面,会执行两次onbeforeunload。因此我们还需在完善下,以便兼容FF。

     <script language= "JavaScript" >
     var _t;
     window.onbeforeunload = function ()
     {
          setTimeout( function (){_t = setTimeout(onunloadcancel, 0)}, 0);
          return "真的离开?" ;
    }
    
    
     window.onunloadcancel = function ()
     {
          clearTimeout(_t);
          alert( "取消离开" );
     }
     </script>

这里使用了一种我也说不出原因的办法,应该算是hack,解决了FF下的bug。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值