关于捕获用户何时点击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 相关文章推荐
js压缩利器
Feb 20 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
让mocha支持ES6模块的方法实现
Jan 14 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
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
javascript常用的方法分享
2015/07/01 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
python使用Berkeley DB数据库实例
2014/09/26 Python
python中pygame模块用法实例
2014/10/09 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Django添加feeds功能的示例
2018/08/07 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
结束运行python的方法
2020/06/16 Python
Python类的继承super相关原理解析
2020/10/22 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
飘柔洗发水广告词
2014/03/14 职场文书
三爱活动实施方案
2014/03/19 职场文书
家长对老师的评语
2014/04/18 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
数学教师个人工作总结
2015/02/06 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS