关于捕获用户何时点击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 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
用js实现的抽象CSS圆角效果!!
May 03 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
微信小程序 开发之快递查询功能的实现
2017/01/09 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
Python3 翻转二叉树的实现
2019/09/30 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
生产副总岗位职责
2013/11/28 职场文书
教师党员思想汇报
2014/01/06 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
心理咨询承诺书
2014/05/20 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
2015年调度员工作总结
2015/04/30 职场文书
Python简易开发之制作计算器
2022/04/28 Python