关于捕获用户何时点击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 相关文章推荐
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
ES6的新特性概览
Mar 10 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
fullpage.js最后一屏滚动方式
Feb 06 Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
pytorch构建多模型实例
2020/01/15 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
双十佳事迹材料
2014/01/29 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
安踏广告词改编版
2014/03/21 职场文书
委托书范文
2014/04/02 职场文书
项目建议书模板
2014/05/12 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
2015大学生实训报告
2014/11/05 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫