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 语言的递归编程
May 18 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
获取body标签的两种方法
Oct 13 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
vue实现分页栏效果
Jun 28 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
浅谈python迭代器
2017/11/08 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
python实现图片中文字分割效果
2019/07/22 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
python反扒机制的5种解决方法
2021/02/06 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
HEMA法国:荷兰原创设计
2019/02/21 全球购物
淘宝中秋节活动方案
2014/01/31 职场文书
工作鉴定评语
2014/05/04 职场文书
委托书的格式
2014/08/01 职场文书
商铺租房协议书范本
2014/12/04 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
vue选项卡切换的实现案例
2022/04/11 Vue.js