window.onbeforeunload方法在IE下无法正常工作的解决办法


Posted in Javascript onJanuary 23, 2010

事件的起因是由于在工作中有客户反映,常常会有用户在浏览网页的过程中订购了商品,但是由于用户一下子打开的窗口过多,又或者在敲打键盘时,错误地按到了F5键,导致页面刷新或者不正常关闭,而这时在该网页上所做的一切操作的信息都丢失了,如果我们可以提供一个在客户信息未处理完成时的提示那该多好啊,下面的代码可以做到不管用户是点击了关闭,或者是在任务栏关闭、点击后退、刷新、按F5键,都可以检测到用户即将离开的消息。

<script type="text/javascript" language="javascript"> 
function bindunbeforunload() 
{ 
window.onbeforeunload=perforresult; 
} 
function unbindunbeforunload() 
{ 
window.onbeforeunload=null; 
} 
function perforresult() 
{ 
return"当前操作未保存,如果你此时离开,所做操作信息将全部丢失,是否离开?"; 
} 
</script>

只需要将bindunbeforunload()方法注册到要检测的页面上即可,你可以在body的onload或者document.ready中注册这个方法,在这里我们采用的是window.onbeforeunload,即是在页面即将卸载之前弹出提示框,好的,现在来测试一下,测试代码:
<html> 
<head><title>this is id onbeforunload event test</title> 
</head> 
<script type="text/javascript" language="javascript"> 
function bindunbeforunload() 
{ 
window.onbeforeunload=perforresult; 
} 
function unbindunbeforunload() 
{ 
window.onbeforeunload=null; 
} 
function perforresult() 
{ 
return"当前操作未保存,如果你此时离开,所做操作信息将全部丢失,是否离开?"; 
} 
</script> 
<body onload="javascript:return bindunbeforunload();"> 
<h1>test is start</h1> 
<input type="button" value="绑定事件" id="btnBind" onclick="return biindunbeforunload();"/> 
<input type="button" value="删除绑定事件" id="btnUnBind" onclick="unbiindunbeforunload();"/> 
</body> 
</html>

上面的代码就是我此次测试的所有代码了,现在刷新页面,嗯,很好,弹出了我们期望中的对话框。但是当我在IE下打开上述代码时,我的“删除事件绑定按钮”没有发挥作用,这让我很崩溃,国内3分之2的用户都在使用IE,特别是在使用该死的IE6、7,如果我的代码不能在IE6、7下正常的工作,那相当于我的工作是白做了,当然,奖金的那些事情就更不用想了。办法都是人想出来的,好吧,我利用一个全局变量来控制是否弹出对话框,修改后的"javascript"代码如下:
<script type="text/javascript" language="javascript"> 
var goodexit=false; 
function bindunbeforunload() 
{ 
goodexit=false; 
window.onbeforeunload=perforresult; 
} 
function unbindunbeforunload() 
{ 
goodexit=true; 
window.onbeforeunload=null; 
} 
function perforresult() 
{ 
if(!goodexit) 
{ 
return"当前操作未保存,如果你此时离开,所做操作信息将全部丢失,是否离开?"; 
} 
} 
</script>

同时调用删除绑定事件时,将变量goodexit的值更改为:true,表示用户是正常退出,这样自然不会弹出对话框了。
再测试一下,正常了,对,这就是我想要的结果!
本篇文章源于从Brandon Himes处而得,并且还是从google快照,源文链接已找不到,本来想翻译的,但是本人水平实在有限,看得懂而已,如果翻译得不好反而招骂,如果朋友们想看源文,请直接点击这里,这是快照地址,可能一段时间后就不存在了。
Javascript 相关文章推荐
javascript instanceof 内部机制探析
Oct 15 Javascript
javascript中caller和callee详解
Aug 10 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
js面向对象的写法
Feb 19 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
Vue3为什么这么快
Sep 23 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 #Javascript
用JS写的一个TableView控件代码
Jan 23 #Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 #Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 #Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 #Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 #Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 #Javascript
You might like
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python连接池实现示例程序
2013/11/26 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python全局变量用法实例分析
2016/07/19 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python学生管理系统
2019/01/30 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
python文本数据处理学习笔记详解
2019/06/17 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
企业治理工作自我评价
2013/09/26 职场文书
三八妇女节标语
2014/10/09 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL