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

更新时间：2017年01月09日 14:13:21 作者：Bruceqi

本文主要介绍了javascript监听页面刷新和页面关闭事件的方法，具有一定的参考价值，下面跟着小编一起来看下吧

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

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

相同点:

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

不同点：

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

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 判断文件类型并控制表单提交示例代码
判断文件类型控制表单提交这些都是在客户端实现的，下面有个不错的示例，感兴趣的朋友可以参考下
2013-11-11
如何HttpServletRequest文件对象并储存
这篇文章主要介绍了如何HttpServletRequest文件对象并储存,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
DEDECMS如何为文章添加HOT NEW标志图片
再用织梦建站的时候，常常需要要在列表页添加前两天的文章后面添加个new小图片，那么此功能是怎么实现的呢，下面通过本文给大家详解dedecms为文章添加HOT NEW标志图片，需要的朋友可以参考下
2015-08-08
jQuery拖拽 & 弹出层介绍与示例
这篇文章主要介绍了jQuery拖拽 & 弹出层，有需要的朋友可以参考一下
2013-12-12
JavaScript条件判断_动力节点Java学院整理
JavaScript使用if () { ... } else { ... }来进行条件判断。下通过语句代码给大家详细介绍js 条件判断的基本知识，需要的的朋友参考下吧
2017-06-06
js正则取值的结果数组调试方法
今天小编就为大家分享一篇js正则取值的结果数组调试方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
uniapp开发安卓App实现高德地图路线规划导航功能的全过程
最近项目需要在APP内实现路线规划导航功能,直接打开高德地图进行导航,下面这篇文章主要给大家介绍了关于利用uniapp开发安卓App实现高德地图路线规划导航功能的相关资料,需要的朋友可以参考下
2022-08-08
js实现常用排序算法
这篇文章主要为大家详细介绍了js实现常用排序算法的代码，感兴趣的小伙伴们可以参考一下
2016-08-08
js获取鼠标位置杂谈附多浏览器兼容代码
最近在搞一个AJAX的小功能，目的是用浮动div框显示当前鼠标下控件的详细信息，其中获得鼠标位置这块害得我走了很多冤枉路，因为压根没有想到我下面提到的第二点的区别，所以我的页面出来总是找不到我之前定义的那个div
2008-11-11
JS事件处理机制及事件代理（事件委托）实例详解
这篇文章主要介绍了JS事件处理机制及事件代理,结合实例形式详细分析了JS时间处理机制与事件代理功能、用法及相关使用技巧,需要的朋友可以参考下
2023-06-06