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

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

赞 (0)

相关推荐

  • 使用onbeforeunload属性后的副作用

    使用onbeforeunload属性后的副作用

    在使用博客园的编辑器编辑文章时,有一个挺体贴用户的功能,就是如果用户进入编辑器后,不是执行"POST"操作而要退出当前编辑器页面,我们会得到一个Alert窗口提示(如下图).这个功能其实很简单,就是通过处理window.body或frameset对象或元素的onbeforeunload事件实现的. 这个unbeforeunload的具体用法我就不说了,反正几乎能引起当前页面发生跳转的任何动作,都会触发这个事件.并且它先于unload事件被触发,如果在其的事件处理函数里面向event.r

  • 关闭浏览器时提示onbeforeunload事件

    onbeforeunload事件 它是这样用的: 复制代码 代码如下: <script language="javascript">      g_blnCheckUnload = true;      function RunOnBeforeUnload() {              if (g_blnCheckUnload) {        window.event.returnValue = 'You will lose any unsaved content'

  • 判断用户的在线状态 onbeforeunload事件

    获得用户登陆状态不用说了,判断离开的话就有一点问题了,如果说用户都是按照设计者的规定触发退出事件离开的话那就没什么难度了,但是用户的离开方式多种多样,怎么在用户非法离开的时候即时的判断离开呢?最常见的非法离开就是关闭浏览器了. 复制代码 代码如下: <BODY onbeforeunload="body_onUnload()"> <script> window.onbeforeunload = function() { if (window.event.clien

  • onbeforeunload与onunload事件异同点总结

    1)异同点 相同点:onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定. 不同点: a)onbeforeunload在onunload之前执行 ,它还可以阻止onunload的执行. b)onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;nunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用 . c)onbefor

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

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

  • ubuntu下没有中文输入法的解决办法

    ubuntu下没有中文输入法的解决办法

    ubuntu下没有中文输入法的解决办法! 我们在安装虚拟机或者ubuntu系统的时候,常见的是尽管是中文版本的但却没有中文输入法,确实是一件很恼火的事情! 我自己也亲身经历过,特此给大家提供一种方法,很好用的! 我们在安装ubuntu系统的时候,最常见也是我们大家默认的是不会安装在线更新什么的,因为这样下来计费时间,还是费时间!所以就没有更新! 所以当出现,没有中文输入法的时候,我们第一个要做的就是: (1)更新系统软件,这一点不做解释,我们需要选取最近的节点作为我们更新软件的服务器: (2)在

  • 基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法

    情景 目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件 代码片段 $.ajax({ type: "POST", url: root + "/xxx, data: requestData, dataType: "json", success: function(data){ // 清空列表 $("#formOpinion #

  • jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法

    如果版本是: 1.3.1 IE无法显示关闭按钮 如果版本是: 1.3.4 IE6无法显示关闭按钮 解决办法: Version: 1.3.1 打开fancybox.css 注释掉此行: .fancybox-ie #fancybox-close { background: transparent; filter: progid : DXImageTransform.Microsoft.AlphaImageLoader ( src = 'images/fancy_close.png', sizingM

  • Java在Linux下 不能处理图形的解决办法 分享

    java在图形处理时调用了本地的图形处理库.在利用Java作图形处理(比如:图片缩放,图片签名,生成报表)时,如果运行在windows上不会出问题.如果将程序移植到Linux/Unix上的时候有可能出现图形不能显示的错误. 提示信息:"Can't connect to X11 window server"这是由于Linux的图形处理需要一个X Server服务器. 解决办法: 1．如果服务器上安装有图形界面,可以通过设置环境变量:DISPALY=127.0.0.1:0.0解决. 2.

  • CentOS 6下root密码忘记的解决办法

    这里以centos 6为例,忘记root密码的解决办法,供大家参考,具体内容如下 第一步:先将系统重新启动,在读秒的时候按下任意键就会出现如下图的菜单界面: 第二步:按下『e』就能够进入grub的编辑模式,如图: 第三步:将光标移动到kernel那一行,再按一次『 e 』进入kernel该行的编辑画面中, 然后在出现的画面当中,在最后输入 single : 第四步:再按下『 Enter 』确定之后,按下 b 就可以启动进入单人维护模式.在这个模式下,你不需要输入密码就可以获取终端的控制权限(即使

  • angularjs下拉框空白的解决办法

    搜索angularjs下拉框空白,可以出现很多解决方案,但是对于静态字段来说,网上目前还没有找到解决方案,如下: <select class="form-control" ng-model="UserState" ng-init="UserState=0"> <option value="-1">选择状态</option> <option value="0">

  • 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,

  • IE8下Ajax缓存问题及解决办法

    Ajax简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 下面的代码,在其他浏览器都是正常的,但是在IE8中出现诡

  • 详解Linux下出现permission denied的解决办法

    详解Linux下出现permission denied的解决办法

    Permission denied: 出现的原因的是:没有权限进行读.写.创建文件.删除文件等操作. 解决方法:输入命令 sudo chmod -R 777  /工作目录, 例如:sudo chmode -R 777 /home/HDD,此时就可以在该路径下进行一系列的操作. sudo:是linux系统管理指令,是允许系统管理员让普通用户执行一些或者全部的root命令的一个工具. -R:是指几连医用到目录里所有子目录和文件: 777:是指所有用户都拥有的最高权限. 但是很不方便也不适合新手,简单

随机推荐