关于捕获用户何时点击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之二(接口实现介绍)
Jan 27 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
JavaScript中的高级函数
Jan 04 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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
用户的详细注册和判断
2006/10/09 PHP
WINXP下apache+php4+mysql
2006/11/25 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
浅析javascript的return语句
2015/12/15 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
python 以16进制打印输出的方法
2018/07/09 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
详解python中@的用法
2019/03/27 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
django框架中间件原理与用法详解
2019/12/10 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python Matplotlib模块的使用
2020/09/16 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
实习生自荐信范文分享
2013/11/27 职场文书
工作建议书范文
2014/05/13 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
员工手册编写范本
2015/05/14 职场文书
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL