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


Posted in Javascript onJanuary 09, 2017

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

这里就给大家讲讲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 任何情况都不执行。

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

onbeforeunload:

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7会出现bug

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

示例代码:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
vue实现轮播图帧率播放
Jan 26 Vue.js
JS获得多个同name 的input输入框的值的实现方法
Jan 09 #Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 #Javascript
原生Javascript插件开发实践
Jan 09 #Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 #Javascript
详解网站中图片日常使用以及优化手法
Jan 09 #Javascript
jQuery实现表格元素动态创建功能
Jan 09 #Javascript
input输入密码变黑点密文的实现方法
Jan 09 #Javascript
You might like
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
php和asp语法上的区别总结
2019/05/12 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
2015/04/06 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
浅谈Django REST Framework限速
2017/12/12 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
JMS中Topic和Queue有什么区别
2013/05/15 面试题
音乐系毕业生自荐信
2013/10/27 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
给全校老师的建议书
2014/03/13 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
北京天坛导游词
2015/02/12 职场文书
写给女朋友的保证书
2015/05/09 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书