关于捕获用户何时点击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 KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
js对象基础实例分析
Jan 13 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
js动态生成表格(节点操作)
Jan 12 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程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
php实现word转html的方法
2016/01/22 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
微信小程序常用简易小函数总结
2019/02/01 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
Python可以实现栈的结构吗
2020/05/27 Python
深入了解Python enumerate和zip
2020/07/16 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
保护环境建议书100字
2014/05/13 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android