关于捕获用户何时点击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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 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
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
浅谈js的异步执行
2016/10/18 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
python实现图片转字符画的完整代码
2021/02/21 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
一些Solaris面试题
2015/12/22 面试题
大学生军训感想
2014/02/16 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
市场营销计划书
2015/01/17 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
小兵张嘎观后感
2015/06/03 职场文书
2015入党自传书范文
2015/06/26 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL