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 相关文章推荐
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 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
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
vue组件实例解析
2017/01/10 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
python实现自主查询实时天气
2018/06/22 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
三维科技面试题
2013/07/27 面试题
2015年全国科普日活动总结
2015/03/23 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL