脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 监听页面刷新 页面关闭事件

javascript监听页面刷新和页面关闭事件方法详解

 更新时间：2017年01月09日 14:13:21   作者：Bruceqi  
本文主要介绍了javascript监听页面刷新和页面关闭事件的方法，具有一定的参考价值，下面跟着小编一起来看下吧

在我们的日常生活中，时常遇到这么一种情况，当我们在点击一个链接、关闭页面、表单提交时等情况，会提示我们是否确认该操作等信息。

这里就给大家讲讲javascript的onbeforeunload()和onunload()两个事件。

相同点:

两者都是在对页面的关闭或刷新事件作个操作。

不同点：

  1. unbeforeunload（）事件执行的顺序在onunload()事件之前发生。(因为，unbeforeunload()是在页面刷新之前触发的事件，而onubload()是在页面关闭之后才会触发的)。
  2. unbeforeunload（）事件可以禁止onunload()事件的触发。
  3. onunload()事件是无法阻止页面关闭的。
  4. 浏览器的兼容

onunload:

IE6，IE7，IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行；

IE9 刷新页面 会执行，页面跳转、关闭浏览器不能执行；

firefox(包括firefox3.6) 关闭标签之后、页面跳转之后、刷新页面之后能执行，但关闭浏览器不能执行；

Safari 刷新页面、页面跳转之后会执行，但关闭浏览器不能执行；

Opera、Chrome 任何情况都不执行。

onbeforeunload:

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7会出现bug　　

示例代码:

onbeforeunload()：

方式一:html元素中添加

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onbeforeunload="return myFunction()">
<p>该实例演示了如何向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.qqtimezone.top">博客地址</a>  
<script>
function myFunction() {
 return "自定义内容";
}
</script>
</body>
</html>

方式二:javascript中添加

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.runoob.com">点击调整到菜鸟教程</a>
<script>
window.onbeforeunload = function(event) {
 event.returnValue = "我在这写点东西...";
};
</script>
</body>
</html>

方式三:添加addEventListener()事件(不过此方法IE8以下不支持)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。</p>
<p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
<a href="http://www.qqtimezone.top">跳转地址</a>
<script>
window.addEventListener("beforeunload", function(event) {
 event.returnValue = "我在这写点东西...";
});
</script>
</body>
</html>

onunload():

方式一：html元素中添加

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript">
  function fun() {
   // dosomethings
  }
 </script>
</head>
<body onunload="fun()">
</body>
</html>

方式二：javascript添加

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script type="text/javascript">
 window.onunload = function() {
  // dosomethings
 };
 </script>
</head>
<body>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS实现数组扁平化的方法分享

    JS实现数组扁平化的方法分享

    数组扁平化指的是：将一个多层嵌套的数组，处理成只有一层的数组。本文主要和大家介绍了几个常用的JS数组扁平化方法，希望对大家有所帮助
    2023-04-04
  • JavaScript脚本性能优化注意事项

    JavaScript脚本性能优化注意事项

    本文总结了我在JavaScript编程中所找到的提高JavaScript运行性能的一些方法，其实这些经验都基于几条原则
    2008-11-11
  • JavaScript对象访问器的工作原理及使用方法

    JavaScript对象访问器的工作原理及使用方法

    今天来聊一下JavaScript中的对象访问器,JavaScript的主要功能之一是能够定义对象,这些对象可以封装属性和方法,本文将深入探讨 JavaScript 对象访问器是什么、它是如何工作的以及使用对象访问器的作用,需要的朋友可以参考下
    2024-06-06
  • Vue formData实现图片上传

    Vue formData实现图片上传

    这篇文章主要为大家详细介绍了Vue formData实现图片上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-08-08
  • 实现图片首尾平滑轮播(JS原生方法—节流)

    实现图片首尾平滑轮播(JS原生方法—节流)

    下面小编就为大家带来一篇实现图片首尾平滑轮播(JS原生方法—节流)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JavaScript用Number方法实现string转int

    JavaScript用Number方法实现string转int

    parseInt方法在format'00'开头的数字时会当作2进制转10进制，所以建议string转int最好用Number方法
    2014-05-05
  • JavaScript利用crypto模块实现加解密

    JavaScript利用crypto模块实现加解密

    crypto模块提供了加密功能，包含对 OpenSSL 的哈希、HMAC、加密、解密、签名、以及验证功能的一整套封装。本文将利用它实现加解密算法，需要的可以参考一下
    2023-02-02
  • JS中的多态实例详解

    JS中的多态实例详解

    本文通过实例代码很详细的给大家介绍了js中的多态，感兴趣的朋友一起看看吧
    2017-10-10
  • JavaScript动画函数封装详解

    JavaScript动画函数封装详解

    动画的原理是通过定时器setInterval() 不断移动盒子位置。但是如果同时有好几个元素都需要添加动画呢？我们就可以考虑将其封装成一个简单的动画函数。本文将为大家介绍如何进行封装，需要的可以参考一下
    2021-12-12
  • JavaScript面向对象继承原理与实现方法分析

    JavaScript面向对象继承原理与实现方法分析

    这篇文章主要介绍了JavaScript面向对象继承原理与实现方法,结合实例形式分析就面向对象程序设计中原形、对象、继承的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下
    2018-08-08

最新评论