Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可 以阻止onunload的执行。

　　Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读 取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无 法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。
1、onbeforeunload事件：
　　说明：目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。
用法：
·object.onbeforeunload = handler 
·<element onbeforeunload = “handler” … ></element> 
描述：
事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。
　　触发于：
　　·关闭浏览器窗口 
　　·通过地址栏或收藏夹前往其他页面的时候 
　　·点击返回，前进，刷新，主页其中一个的时候 
　　·点击 一个前往其他页面的url连接的时候 
　　·调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit. 
　　·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。 
　　·重新赋予location.href的值的时候。 
　　·通过input type=”submit”按钮提交一个具有指定action的表单的时候。 
　　可以用在以下元素：
　　·BODY, FRAMESET, window
　　平台支持：
　　IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+ 
　　示例：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>onbeforeunload测试</title>

<script>

function checkLeave(){

     　event.returnValue="确定离开当前页面吗？";

}

</script>

</head>

<body onbeforeunload="checkLeave()">

</body>

</html>

但是onbeforeunload有个小毛病，就是页面刷新时，他还是会调用到onbeforeunload，为什么？其实刷新就相当于关闭了这个IE再重新打开的意思，因此还是会调用到onbeforeunload。

究竟怎么解决刷新不调用onbeforeunload呢？

网上提供很多方法，本人觉得最实用还是以下这段JS


window.onbeforeunload   =   function(){   

      var   n   =   window.event.screenX   -   window.screenLeft;   

      var   b   =   n   >   document.documentElement.scrollWidth-20;   

      if(b   &&   window.event.clientY   <   0   ||   window.event.altKey)   

      {   

          alert("是关闭而非刷新");   

          window.event.returnValue   =   "是否关闭？";

      }else{

             alert("是刷新而非关闭");   

     }   

}
2、onunload事件
用法：
·object.onbeforeunload = handler 
·<element onbeforeunload = "handler"></element>
　　描述：
当用户关闭一个页面时触发 onunload 事件。

　　触发于：
　　·关闭浏览器窗口 
　　·通过地址栏或收藏夹前往其他页面的时候 
　　·点击返回，前进，刷新，主页其中一个的时候 
　　·点击 一个前往其他页面的url连接的时候 
　　·调用以下任意一个事件的时候：click，document write，document open，document close，window close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit. 
　　·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。 
　　·重新赋予location.href的值的时候。 
　　·通过input type=”submit”按钮提交一个具有指定action的表单的时候。

　　示例：


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

onbeforeunload与onunload事件的更多相关文章

  1. 【原】js离开页面执行函数 onbeforeunload与onunload事件

    在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户离开的时候 执行这个函数.百度之,有onbeforeunlo ...

  2. onunload事件和onbeforeunload事件

    记录知识点背景:在做一个h5项目时,在统计事件时有这样一个需求, 希望能统计到用户是从第几页离开的,用到了这个知识点.在此记录. window.onunload 1.定义和用法 onunload事件在 ...

  3. 关闭浏览器事件 onbeforeunload和onunload

    在做毕设的时候,需要在关闭浏览器的时候向后台服务器修改用户在线状态.首先讲一下 onbeforeunload 和 onunload(都是在刷新或关闭时调用) 的区别: (1)onbeforeunloa ...

  4. onunload事件不触发的探索

    如果现有一需求:浏览器页面关闭时弹出一个对话框,询问是否要退出,应该怎么做呢?    可用onunload事件来实现,该事件会在刷新和关闭页面时执行 我用如下3种方法绑定该事件,但所有主流浏览器都无法 ...

  5. 10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）

    标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...

  6. jsp关闭或刷新浏览器（解决浏览器不兼容），请求后台onbeforeunload、onunload

    jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台  onbeforeunload.onunload 1.看代码: function test(e) { var json = "退出,清理 ...

  7. onunload事件火狐不支持，在IE浏览器中，只有刷新时该事件才发生

    onunload事件火狐不支持,在IE浏览器中,只有刷新时该事件才发生

  8. javascript--BOM的onload事件和onunload事件

    1.onload事件 onload,页面加载后执行,所谓页面加载完成,指页面上所有的元素创建完毕,引用的所有的外部资源(js.css.图片)等下载完毕. 所以onload执行的比较晚,因为如果页面上有 ...

  9. onload 和 onunload 事件

    onload 和 onunload 事件会在用户进入或离开页面时被触发. onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本. onload 和 onunl ...

随机推荐

  1. bzoj 2565: 最长双回文串 回文自动机

    题目: Description 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为"abc",逆序为"cba",不相同 ...

  2. bzoj 3754: Tree之最小方差树 模拟退火+随机三分

    题目大意: 求最小方差生成树.N<=100,M<=2000,Ci<=100 题解: 首先我们知道这么一个东西: 一些数和另一个数的差的平方之和的最小值在这个数是这些数的平均值时取得 ...

  3. OIer应该知道的二进制知识

    计算机使用\(2\)进制,这是众所周知的.在学习\(OI\)的过程中,\(2\)进制也显得尤为重要.有时候,细节决定成败,所以我想总结一下容易被遗忘和误解的关于\(2\)进制的知识. 1.运算符 &a ...

  4. 洛谷【P1138】第k小整数

    题目传送门:https://www.luogu.org/problemnew/show/P1138 桶排: 对于值域在可以接受的范围内时,我们可以用不依赖比较的桶排去将数据排序.因为桶排不依赖比较排序 ...

  5. bzoj 1711 Dining吃饭 —— 最大流

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1711 食物一列,牛拆点,饮料一列. 代码如下: #include<cstdio> ...

  6. docker-建立私有registry

    我们知道可以使用hub.docker.com作为我们公共或者私有的registry.但由于服务器在国外的原因,网速会非常的慢.所以我们在利用docker开发构建容器服务时,我们希望能够建立自己的私有r ...

  7. Poj 1659 Distance on Chessboard(国际象棋的走子规则)

    一.Description 国际象棋的棋盘是黑白相间的8 * 8的方格,棋子放在格子中间.如下图所示: 王.后.车.象的走子规则如下: 王:横.直.斜都可以走,但每步限走一格. 后:横.直.斜都可以走 ...

  8. C#事件触发机制

    C#的事件触发机制,类似于c++的回调函数机制 我先简单说一下,委托和事件的实质,后期再重开一篇博文来详细说 委托:指向方法的指针,类似于C的函数指针 事件:是一个可以存放0个或多个方法指针的数据结构 ...

  9. shell分库备份

    分库备份企业实战题7:如何实现对MySQL数据库进行分库备份,请用脚本实现 #!/bin/bash MysqlUser=root PassWord=root Port= Socket="/u ...

  10. idea调试SpringMvc, 出现：”javax.servlet.ServletException: java.lang.IllegalStateException: Cannot create a session after the response has been committed"错误的解决方法

    调试拦截器出现以下错误: HTTP Status 500 - javax.servlet.ServletException: java.lang.IllegalStateException: Cann ...