关于捕获用户何时点击window.onbeforeunload的取消事件


Posted in Javascript onMarch 06, 2011

Detecting When The User Has Clicked Cancel
One of the things you may want to do is to be notified when the user clicks cancel, aborting a page unload. Unfortunately there's no way to be immediately notified. The best you can do is to set a unique global variable in your "onbeforeunload" event and then look to see if that variable has been set in other functions. There is no way to get an immediate notification that the user has aborted a page unload.
The example code I used above to do an example of an "onbeforeunload" dialog is as follows:

var _isset=0; function demo() { 
window.onbeforeunload = function () { 
if (_isset==0) { 
_isset=1; // This will only be seen elsewhere if the user cancels. 
return "This is a demonstration, you won't leave the page whichever option you select."; 
} 
} 
_isset=0; 
window.location.reload(); 
return false; 
}

This code defines a global variabled named _isset, and then initializes it to zero. In our "onbeforeunload" event the variable is checked and if it's set to one, no unload dialog box will appear. The only way _isset could ever be one is if the user previously aborted a page unload.

But as you can see this method won't help you if you need to be immediately notified that that the user has finished dealing with the confirmation box. You can detect when it appears on the screen but there's no way to know when the user has finished interacting with it if the user clicked cancel (if the user clicked OK, then of course the unload event will have been tripped).
--------------------------------------------------------------
虽然如此,但还是有高手给出了如下代码 ^^

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 
<title>onbeforeunload test</title> 
<script type="text/javascript"><!-- 
window.onbeforeunload = function() { 
// in Firefox and Netscape 7.2+ the setTimeout or setInterval do not wait 
// to be executed until after the user clicks one of the buttons in the 
// confirm()-like box. //setTimeout("alert('hi from setTimeout()');",500); 
// setTimeout() and setInterval() aren't called when ok is clicked in 
// IE5-6/Win, but is called in IE7 when the time is short, but not when 
// it's longer, like 500 (a half second). 
window.unloadTimer = setInterval( 
"alert('hi from setInterval()');clearInterval(window.unloadTimer);",500); 
window.onunload = function() {clearInterval(window.unloadTimer);} 
return 'onbeforeunload testing'; 
} 
// --> 
</script> 
</head> 
<body> 
<h1>onbeforeunload test</h1> 
</body> 
</html>

<script type="text/javascript"> 
//<![CDATA[ 
var 
is_asked = false; window.onbeforeunload = 
function (ev) { 
var e = ev || window.event; 
window.focus(); 
if (!is_asked){ 
is_asked = true; 
var showstr = "CUSTOM_MESSAGE"; 
if (e) { //for ie and firefox 
e.returnValue = showstr; 
} 
return showstr; //for safari and chrome 
} 
}; 
window.onfocus = 
function (ev){ 
if (is_asked){ 
window.location.href = "http://www.google.com"; 
} 
} 
//]]> 
</script
Javascript 相关文章推荐
动态调用css文件——jquery的应用
Feb 20 Javascript
js控制div及网页相关属性的代码
Dec 19 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
JavaScript中的几种继承方法示例
Dec 06 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 #Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 #Javascript
淘宝搜索框效果实现分析
Mar 05 #Javascript
再论Javascript下字符串连接的性能
Mar 05 #Javascript
再论Javascript的类继承
Mar 05 #Javascript
Array的push与unshift方法性能比较分析
Mar 05 #Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 #Javascript
You might like
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php之readdir函数用法实例
2014/11/13 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
2016/08/24 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Python3中常用的处理时间和实现定时任务的方法的介绍
2015/04/07 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
浅谈Python中的继承
2020/06/19 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
档案接收函范文
2014/01/10 职场文书
推普周活动总结
2014/08/28 职场文书
2014年英语工作总结
2014/12/20 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
这样写python注释让代码更加的优雅
2021/06/02 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
bat批处理之字符串操作的实现
2022/03/16 Python