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学习笔记之10个原生技巧
May 21 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
vue实现微信分享功能
Nov 28 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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/09/04 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
php递归json类实例
2014/12/02 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
python pandas模块基础学习详解
2019/07/03 Python
pandas 时间格式转换的实现
2019/07/06 Python
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
广州品高软件.net笔面试题目
2012/04/18 面试题
2014两会学习心得:时代的发展
2014/03/17 职场文书
小学语文课后反思精选
2014/04/25 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
小学数学教研活动总结
2014/07/01 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
无线电知识基础入门篇
2022/02/18 无线电
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android