网站地图    收藏   

子栏目

主页 > 前端 > javascript >

js onbeforeunload与onunload事件使用详解

来源：自学PHP网    时间：2014-09-19 14:47 作者： 阅读:次

[导读] onbeforeunload与onunload事件就是页面加载前与页面关闭时的两个功能的函数，可以防止页面刷新时给提示再刷新或页面关闭时给出提示，下面我来介绍onbeforeunload与onunload事件用法。...

在各种项目开发的过程中，页面离开事件onbeforeunload是我们经常要用到的，可以避免用户操作失误，给用户一个选择的机会，就比如我们常常用到的编辑器中。如果用户选择了离开，那么onunload或者onbeforeunload事件自然会触发；但若用户选择了取消，又该如何检测呢？

我们假定一个页面离开取消事件，叫做onunloadcancel。显然，这个事件应触发在用户按下对话框的取消按钮之后。但关闭提示对话框的触发流程并不是那么简单。我们先来回顾下这个过程：

 代码如下 复制代码

window.onbeforeunload = function(){     return "真的离开?"; }

   当用户准备离开页面（比如按下关闭按钮，或者刷新页面等等），onbeforeunload事件触发。我们的脚本无法在这个事件里决定是否阻止页面的关闭，唯一能做到的只有返回一个字符串，这个字符串仅作为说明文字出现在关闭选择对话框里，用户可以选择关闭，或者不关闭。但究竟选择哪个，我们无从得知。

然而仔细分析下这个问题，其实不然。 如果用户真选择了关闭页面，那么之后所有的运行代码都byebye了；而继续留在页面的话，就当什么都没发生过，除了onbeforeunload事件。所以，我们在onbeforeunload事件里做点小花招，在此注册个几毫秒之后启动的定时器，如果页面真关闭了，那么这个定时器当然是作废了；那么页面还在，几毫秒的延时对于这个本来就是异步的界面交互事件也没有什么误差。

 代码如下 复制代码

window.onbeforeunload = function(){
    setTimeout(onunloadcancel, 10);
    return "真的离开?";
}
window.onunloadcancel = function(){
    alert("取消离开");
}

我们使用setTimeout，延时10ms执行onunloadcancel。如果页面真关闭了，定时器当然都销毁；反之继续。但在测试中，发现FireFox有个两个BUG：

        1) 有时按下关闭按钮，也会执行onunloadcancel，并且有个对话框一闪而过。如果换成while(1);浏览器会一直卡死，这说明onunloadcancel确实是执行了，只是销毁了界面，但并没有暂停脚本的运行。
        2) 如果是通过刷新页面的方式离开，仅执行一次onbeforeunload，但点击X按钮关闭页面，会执行两次onbeforeunload。因此我们还需在完善下，以便兼容FF。

 代码如下 复制代码

var _t;
window.onbeforeunload = function(){
    setTimeout(function(){_t = setTimeout(onunloadcancel, 0)}, 0);
    return "真的离开?";
}
window.onunloadcancel = function(){
    clearTimeout(_t);
    alert("取消离开");
}

这里使用了一种我也说不出原因的办法，应该算是hack，解决了FF下的bug。

再来看看csdn的的代码是怎么写的：（直接catch掉了，也是一个不错的办法）

 代码如下 复制代码

showConfirm = true;
window.onbeforeunload = function () {
      if (showConfirm) {
          if (csdn.val2("editor").replace(/<.+?>/g, "").length > 0) {//可以忽略
              try { return "您的文章尚未保存！"; } catch (err) { }
          }
      }
  };

示例：

 代码如下 复制代码

<html xmlns="http://www.w3.org/1999/xhtml">
　　　<head>
　　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
　　　<title>onunload测试</title>
　　　<script>
　　　function checkLeave(){
　　　　alert("欢迎下次再来！");
　　　}
　　　</script>
　　　</head>
　　　<body onunload="checkLeave()">
　　　</body>
　　　</html>

一个判断页面是否真的关闭和刷新的好方法：

 

 代码如下 复制代码
window.onbeforeunload=function (){
alert("===onbeforeunload===");
if(event.clientX>document.body.clientWidth && event.clientY < 0 || event.altKey){
alert("你关闭了浏览器");
}else{
alert("你正在刷新页面");
}
}

如果页面被强制关闭,弹窗提示：是否确定离开？，点击确定 保存数据离开，点击取消，停留在当前页面

只支持IE

 代码如下 复制代码

document.body.onbeforeunload = function (){
 event.returnValue="";
}

document.body.onunload = function (){
}

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论