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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
动态添加js事件实现代码
Mar 12 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
AngularJS基础 ng-show 指令简单示例
Aug 03 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 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摘要生成函数(无乱码)
2012/02/04 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
python 快速排序代码
2009/11/23 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python找出最小的K个数实例代码
2018/01/04 Python
PyQt5实现拖放功能
2018/04/25 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
销售简历自我评价
2014/01/24 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
小学端午节活动方案
2014/03/13 职场文书
小学毕业演讲稿
2014/04/25 职场文书
和睦家庭事迹
2014/05/14 职场文书
委托书格式
2014/08/01 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL