JavaScript获取网页关闭与取消关闭的事件

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

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

1 window.onbeforeunload = function()
2 {
3     return "真的离开?";
4 }

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

然而仔细分析下这个问题,其实不然。 如果用户真选择了关闭页面,那么之后所有的运行代码都byebye了;而继续留在页面的话,就当什么都没发生过,除了onbeforeunload事件。所以,我们在onbeforeunload事件里做点小花招,在此注册个几毫秒之后启动的定时器,如果页面真关闭了,那么这个定时器当然是作废了;那么页面还在,几毫秒的延时对于这个本来就是异步的界面交互事件也没有什么误差。

01 <script language="JavaScript">
02 window.onbeforeunload = function()
03 {
04     setTimeout(onunloadcancel, 10);
05     return "真的离开?";
06 }
07 window.onunloadcancel = function()
08 {
09     alert("取消离开");
10 }
11 </script>

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

  1. 有时按下关闭按钮,也会执行onunloadcancel,并且有个对话框一闪而过。如果换成while(1);浏览器会一直卡死,这说明onunloadcancel确实是执行了,只是销毁了界面,但并没有暂停脚本的运行。
  2. 如果是通过刷新页面的方式离开,仅执行一次onbeforeunload,但点击X按钮关闭页面,会执行两次onbeforeunload。因此我们还需在完善下,以便兼容FF。
01 <script language="JavaScript">
02 var _t;
03 window.onbeforeunload = function()
04 {
05     setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
06     return "真的离开?";
07 }
08 window.onunloadcancel = function()
09 {
10     clearTimeout(_t);
11     alert("取消离开");
12 }
13 </script>

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

时间: 2024-08-06 00:36:03

JavaScript获取网页关闭与取消关闭的事件的相关文章

JavaScript获取网页高度和宽度

JavaScript获取网页高度宽度 /********************  * 取窗口滚动条高度  ******************/ function getScrollTop() {     var scrollTop=0;     if(document.documentElement&&document.documentElement.scrollTop)     {         scrollTop=document.documentElement.scrollTo

javascript获取窗口位置、绝对位置、事件位置等

有段时间没更新博客了,工作实在太忙了,加班加班再加班就是我们这个行业的常态吧...还好最近把工作进度完成了,终于有些空余时间了.关于<Javascript高级程序设计>系列,我并没有弃坑,只不过最近在把这本书读第二遍,主要针对一些第一遍没看懂的部分,完成之后我会继续更新的. 这篇文字主要一下三方面内容: 一.javascript获取事件位置 二.Javascript获取dom对象位置 三.Javascript获取绝对坐标 四.浏览器相对桌面位置 一.javascript获取事件位置 首先上图,

分享JavaScript获取网页关闭与取消关闭的事件

在做Web开发时,我们经常用到页面关闭事件onbeforeunload,可以给用户一个选择放弃关闭的机会,就比如这个博客编辑器.如果用户选择了离开,那么onunload事件自然会触发:但若用户选择了取消,又该如何检测呢? 我们假定一个页面离开取消事件,叫做onunloadcancel.显然,这个事件应触发在用户按下对话框的取消按钮之后.但关闭提示对话框的触发流程并不是那么简单.我们先来回顾下这个过程: 复制代码代码如下: window.onbeforeunload = function() {

【转载】实用的Javascript获取网页屏幕可见区域高度

本文转载原地址:这里 1 document.body.clientWidth ==> BODY对象宽度 2 document.body.clientHeight ==> BODY对象高度 3 document.documentElement.clientWidth ==> 可见区域宽度 4 document.documentElement.clientHeight ==> 可见区域高度 5 6 网页可见区域宽: document.body.clientWidth 7 网页可见区域高

javascript获取网页宽高,屏幕宽高,屏幕分辨率等

? <script> var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s += "\r\n网页可见区域高:"+ document.body.clientHeight; s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)"; s += "\r\

javascript获取网页的宽度,高度,屏幕的宽度,高度

//网页宽度 var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //网页高度 var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //屏幕宽度 var xw = screen.availWidth; //屏幕高度 var

获取网页上数据(图片、文字、视频)-b

Demo地址:http://download.csdn.net/detail/u012881779/8831835 获取网页上所有图片.获取所有html.获取网页title.获取网页内容文字... .h 文件  代码: //网页   //NSString *strPath = [NSString stringWithFormat:@"http://www.baidu.com/s?wd=%@&cl=3",theWord];   //视频   //NSString *strPath

关闭网页弹出是否关闭的提示

关闭网页弹出是否关闭的提示:在很多网站都有这样的功能,点点击关闭当前页面的时候,就会弹出一个提示框,可以选择关闭或者不关闭当前页面,下面就介绍一下如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /

iOS UIWebView 获取内容实际高度,关闭滚动效果

iOS UIWebView 获取内容实际高度,关闭滚动效果 近期做东西,将 UIWebView 嵌套在 UIScrollView 里,由 UISCrollView 控制滚动,需要使 UIWebView 的高度同内容高度一致,网上搜索的到代码: htmlHeight = [webView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight"]; 这段代码是无效的,body 获取到的 offsetHeigh