浅谈javascript中onbeforeunload与onunload事件


Posted in Javascript onDecember 10, 2015

在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户离开的时候

执行这个函数。百度之,有onbeforeunload与onunload这两个事件,但是onbeforeunload在用户刷新的时候也会执行。搞得我弄的挺久的,所以想在这里做一个小小的总结

onbeforeunload与onunload事件

onbeforeunload定义和用法

onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。

该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。

对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类似 "确定要离开此页吗?"。该信息不能删除。

但你可以自定义一些消息提示与标准信息一起显示在对话框。

注意: 如果你没有在 <body> 元素上指定 onbeforeunload 事件,则需要在 window 对象上添加事件,并使用 returnValue 属性创建自定义信息(查看以下语法实例)。

注意: 在 Firefox 浏览器中,只显示默认提醒信息(不显示自定义信息)。

使用方法:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body onbeforeunload="return test()">
   
</body>
<script type="text/javascript">
  function test(){
    return "你确定要离开吗";
  }
</script>
</html>

或者:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
   
</body>
<script type="text/javascript">
window.onbeforeunload=function(){
  return "你确定要离开吗";
}
 
</script>
</html>

事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。当然你可以自定义提示文本。

那么,当我只需要在我离开时执行这个函数,而刷新的时候不执行,那怎么做呢?

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)) {
      //window.event.returnValue = "真的要刷新页面么?";
      
      //这里放置我想执行缓存的代码
      cacheFunction();
      
    }
 }

 这样,我离开页面时,可以执行我的缓存代码,而不弹出提示框,我刷新时也不弹出提示框,也不执行。值得一提的时,这个时候,要将ajax设置为同步,即:ajax里面的 async改为: false;

浏览器兼容情况

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7 使用 onbeforeunload 遇到的bug

2、onunload定义和用法

onunload 事件在用户退出页面时发生。

使用方法和onbeforeunload类似

window.onunload = function(){
  return "你确定要离开吗"
}

浏览器兼容情况

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

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

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

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

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

总结

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

Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。

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

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
微信小程序实现原生步骤条
Jul 25 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 #Javascript
JS提交form表单实例分析
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 #Javascript
AngularJs实现ng1.3+表单验证
Dec 10 #Javascript
理解AngularJs指令
Dec 10 #Javascript
详解AngularJS实现表单验证
Dec 10 #Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 #Javascript
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
linux中cd命令使用详解
2015/01/08 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python中np是做什么的
2020/07/21 Python
新闻专业个人自我评价
2013/09/21 职场文书
管理科学大学生求职信
2013/11/13 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
空气环保标语
2014/06/12 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2015年路政工作总结
2015/05/22 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python