关于捕获用户何时点击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 08 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
javascript中2个感叹号的用法实例详解
Sep 04 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
javascript动画之磁性吸附效果篇
Dec 09 Javascript
详解jQuery选择器
Dec 21 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 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比你想象的好得多
2014/11/27 PHP
学习php开源项目的源码指南
2014/12/21 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
php服务器的系统详解
2019/10/12 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
简约JS日历控件 实例代码
2013/07/12 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
pygame实现弹力球及其变速效果
2017/07/03 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
python实现双人五子棋(终端版)
2020/12/30 Python
Python项目打包成二进制的方法
2020/12/30 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
幼儿园教育教学反思
2014/01/31 职场文书
大学生创业项目方案
2014/03/08 职场文书
培训研修方案
2014/06/06 职场文书
公司合并协议书范本
2014/09/30 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
高一语文教学反思
2016/02/16 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
python区块链实现简版工作量证明
2022/05/25 Python