window.onbeforeunload方法在IE下无法正常工作的解决办法_javascript技巧

事件的起因是由于在工作中有客户反映,常常会有用户在浏览网页的过程中订购了商品,但是由于用户一下子打开的窗口过多,又或者在敲打键盘时,错误地按到了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快照,源文链接已找不到,本来想翻译的,但是本人水平实在有限,看得懂而已,如果翻译得不好反而招骂,如果朋友们想看源文,请直接点击这里,这是快照地址,可能一段时间后就不存在了。

时间: 2024-11-10 00:26:32

window.onbeforeunload方法在IE下无法正常工作的解决办法_javascript技巧的相关文章

window.onbeforeunload方法在IE下无法正常工作的解决办法

事件的起因是由于在工作中有客户反映,常常会有用户在浏览网页的过程中订 购了商品,但是由于用户一下子打开的窗口过多,又或者在敲打键盘时,错误地 按到了F5键,导致页面刷新或者不正常关闭,而这时在该网页上所做的一切操作 的信息都丢失了,如果我们可以提供一个在客户信息未处理完成时的提示那该多 好啊,下面的代码可以做到不管用户是点击了关闭,或者是在任务栏关闭.点击 后退.刷新.按F5键,都可以检测到用户即将离开的消息. <script type="text/javascript" lan

JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法_javascript技巧

今天在学习js中的数组时,遇到的输出一个数组中最大.最小值以及它们的下表,以下是自己的解决方法! <script type="text/javascript"> var arr = [14, 14, 53, 14, 14, 53, 67, 67]; var max = arr[0],min = arr[0]; var maxIndex = []; maxIndex[0] = 0; var minIndex = []; minIndex[0] = 0; var j = 1,

基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法_javascript技巧

基于Bootstrap做的下拉菜单在电脑浏览器中可正常使用,在手机浏览器中能弹出下拉列表,却不能选择列表中的菜单项,通过自己百度查找原因将bootstrap脚本文件中的ontouchstart 替换为 disable-ontouchstart可以解决,替换后并不能解决.(红米手机UC浏览器不支持,小米手机UC浏览器正常,其他暂时未测试) jquery:v1.11.2 bootstrap:v3.3.4 以下为前台页面代码: <div class="input-group">

JS和jQuery使用submit方法无法提交表单的原因分析及解决办法_javascript技巧

昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着以前 遇上这样的问题 都是因为 表单中 有 name 或者 id 这些命名跟submit 有冲突,但是检查了几次,始终没有发现 名字冲突,所以这个可能性被排除. 平常自己做触发按钮,基本不用a 标签,但是昨天不知道什么 问题,竟然用了 a 而且还给了 href 为空,由于这个a 的class 有多个

谷歌showModalDialog()方法不兼容出现对话窗口的解决办法_javascript技巧

showModalDialog,在测试中,IE,Firefox中正常运行,但是在google中,点击后没什么反应,在网上看了一下,谷歌浏览器不支持showModalDialog模态对话框和无法返回returnValue,得到了一个解决办法 <script type="text/javascript"> //开启模式窗口 function showMyModal() { var url = "SelectUser.aspx"; //传入参数示例 var m

IE下getJSON不工作的解决办法

应该有不少的新童鞋会碰到这个问题,getJson在IE下不工作..... $.getJSON(); 问题出在哪里呢? 原因:IE浏览器会读取第一缓存,只要阻止即可. var noCache = Date(); $.getJSON("url",{"noCache":noCache},callback) 还有一种解决办法就是用$.ajax()代替 $.ajax({type:"GET",url:"url",dataType:&quo

基于Unit PNG Fix.js有时候在ie6下不正常的解决办法_javascript技巧

网站页面使用unitpngfix.js可以在ie6下使png图片透明.但是有时候会出现png背景不透明,显示为灰色的问题.这是因为在页面加载unitpngfix.js后面有其他js.解决方法:将unitpngfix.js加载代码:<script type="text/javascript" src="js/unitpngfix.js"></script>移到页面最底部.  

iscroll碰到Select无法选择下拉刷新的解决办法_javascript技巧

第一步: 在handleTarget函数方法开始加入: 复制代码 代码如下: var theTarget = e.target; if (theTarget != null && theTarget.tagName == 'SELECT') {     return false; }   第二步: 在 touchStart函数处即_start()处必须加入: 复制代码 代码如下: if (e.target.tagName != "SELECT") {      e.pr

google浏览器window.onbeforeunload方法兼容问题

问题描述 window.onbeforeunload方法在IE内核浏览器是有效的,但是在google浏览器中并不兼容,请教给位怎么在google浏览器中兼容window.onbeforeunload方法 解决方案 window.onbeforeunload = function (e) {e = e || window.event;// For IE and Firefox prior to version 4if (e) {e.returnValue = '确定退出吗?';}// For Sa