序言

　　大家是否经常遇到在关闭网页的时候，会看到一个确定是否离开当前页面的提示框？想一些在线测试系统、信息录入系统等就经常会有这一些提示，避免用户有意或者无意中关掉了页面，导致数据丢失。这里面的实现过程很简单，利用了HTML DOM事件中的onunload和onbeforeunload方法。

unload 事件属性

　　定义：当用户卸载文档时执行一段 JavaScript，例如：

// body
<body onunload="goodbye()">

//window
window.onbeforeunload=function(e){     
　　var e = window.event||e;  
　　e.returnValue=("确定离开当前页面吗？");
} 

　　用法：当用户离开页面时，会发生 unload 事件。注意：如果您重载页面，也会触发 unload 事件（以及 onload 事件）。　

　　触发于：

  • 关闭浏览器窗口
  • 通过地址栏或收藏夹前往其他页面的时候
  • 点击返回，前进，刷新，主页其中一个的时候
  • 点击 一个前往其他页面的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的表单的时候。

onbeforeunload 事件属性

　　定义：在即将离开当前页面(刷新或关闭)时执行 JavaScript，例如：

//body
<body onbeforeunload="goodbye()">
//window
window.onbeforeunload=function(e){     
　　var e = window.event||e;  
　　e.returnValue=("确定离开当前页面吗？");
} 

　　用法：onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。但你可以自定义一些消息提示与标准信息一起显示在对话框。注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。

　　触发于：

  • 关闭浏览器窗口
  • 通过地址栏或收藏夹前往其他页面的时候
  • 点击返回，前进，刷新，主页其中一个的时候
  • 点击 一个前往其他页面的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的表单的时候。

浏览器支持程度

　　目前主流浏览器都支持这两个事件属性

概述

　　onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。 onbeforeunload也是在页面刷新或关闭时调用，onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。onunload是无法阻止页面的更新和关闭的，而 onbeforeunload 可以做到。

　　附：

　　　　页面加载时只执行onload 
　　　　页面关闭时先执行onbeforeunload，最后onunload 
　　　　页面刷新时先执行onbeforeunload，然后onunload，最后onload

附上部分效果图：

绑定body标签的代码：

<!DOCTYPE html>

    <head>

        <meta charset="UTF-8">

        <title>测试</title>

        <script>

        　　function checkLeave(){

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

        　　}

    　　</script>

    </head>

    <body onbeforeunload="checkLeave()">

        测试

    </body>

</html>

谷歌浏览器下的效果：

点击刷新按钮：

点击返回按钮：

通过任务栏或者收藏夹前往其他界面：

关闭页面：

edge下的效果：

点击刷新按钮：

点击返回按钮：

关闭页面：

注：在新版的火狐浏览器（我是用的版本: 57.0 ）里面，上面这种写法不生效？！

绑定window对象的代码：

<!DOCTYPE html>

    <head>

        <meta charset="UTF-8">

        <title>测试</title>

        <script>

        　　window.onbeforeunload=function(e){

            　　var e = window.event||e;

            　　e.returnValue=("确定离开当前页面吗？");

            }

    　　</script>

    </head>

    <body>

        测试

    </body>

</html>

火狐下的效果：

点击刷新按钮：

点击返回按钮：

关闭页面：

注：这种方法在谷歌浏览、edge浏览器下仍适用，效果与第一种一样！

js 离开页面的更多相关文章

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

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

  2. JS离开页面 弹窗

    function bindDOMEvents() { $(document).keydown(function (e) { var key = e.which || e.keyCode; if (ke ...

  3. js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法

    js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...

  4. Jquery关闭离开页面时提醒

    [导读] 离开页面提示多般是放到了发新闻或写日志的页面,我们在百度空间或QQ空间在我们未保存信息时如果离开页面都有提示了,下面我来介绍利用jquery的beforeunload来实现此方法. jque ...

  5. js离开或刷新页面检测(且兼容FF,IE,Chrome)

    <!DOCTYPE html> <html> <head> <script> function closeIt() { return confirm(& ...

  6. js监听浏览器离开页面操作

    序言 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.这里面的实现过程 ...

  7. 【转】js监听浏览器离开页面操作

    [转]https://www.cnblogs.com/slly/p/7991474.html 序言 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录 ...

  8. Vue实现离开页面二次确认

    在项目开发中遇到用户编辑内容后未保存推出编辑页面时需要提示用户"当前数据未保存,是否退出",实际开发中利用window.onbeforeunload方法与vue.$on方法在upd ...

  9. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

随机推荐

  1. C++继承 派生类中的内存布局（单继承、多继承、虚拟继承）

    今天在网上看到了一篇写得非常好的文章,是有关c++类继承内存布局的.看了之后获益良多,现在转在我自己的博客里面,作为以后复习之用. ——谈VC++对象模型(美)简.格雷程化    译 译者前言 一个C ...

  2. git使用(二)----创建版本库

    创建版本库(操作都是在linux环境下) 什么是版本库呢?版本库又名仓库,英文名repository,其实就是一个目录,可以进行增删查改 创建一个目录,这里在根目录下创建一个git_home目录mkd ...

  3. [sh]. 点的含义

    . 的含义 当前目录 隐藏文件 任意一个字符 生效配置文件

  4. 【Android】6.2 AlertDialog（警告对话框）

    分类:C#.Android.VS2015: 创建日期:2016-02-08 一.简介 AlertDialog也是Android系统当中常用的对话框之一. 在一个AlertDialog中,可以有一个Bu ...

  5. netty深入学习之中的一个: 入门篇

    netty深入学习之中的一个: 入门篇 本文代码下载: http://download.csdn.net/detail/cheungmine/8497549 1)Netty是什么 Netty是Java ...

  6. 每日英语：China's Retirement Age Sets Experts at Odds

    The politically explosive issue of the official retirement age has drawn academics from two of China ...

  7. Oracle PLSQL Demo - 18.01管道function[查询零散的字段组成list管道返回]

    --PACKAGE CREATE OR REPLACE PACKAGE test_141213 is TYPE type_ref IS record( ENAME ), WORK_CITY ), SA ...

  8. Uboot的bad_save_user_regs

    下面是一个宏定义,从名字“bad_save_user_regs”就可以猜测它是用来保存程序“出错”时用户态的寄存器的值. 从下面的“use bad_save_user_regs for abort/p ...

  9. TOMCAT源码分析——生命周期管理

    前言 从server.xml文件解析出来的各个对象都是容器,比如:Server.Service.Connector等.这些容器都具有新建.初始化完成.启动.停止.失败.销毁等状态.tomcat的实现提 ...

  10. 一款仿ios7的switches开关按钮

    今天给大家介绍一款仿ios7的switches开关按钮.这款按钮也是纯css实现的.无需引js代码.在实现中给出了两种颜色,三种不同大小的demo.一起看下效果图: 在线预览   源码下载 实现的代码 ...