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 相关文章推荐
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
vue 实现锚点功能操作
Aug 10 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
杏林同学录(四)
2006/10/09 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
js实现点击生成随机div
2020/01/16 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
业绩考核岗位职责
2014/02/01 职场文书
外联部演讲稿
2014/05/24 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
2015年统战工作总结
2015/05/19 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis