浅谈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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 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
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
Python中运行并行任务技巧
2015/02/26 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python笔记之工厂模式
2019/11/20 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
迎新晚会策划方案
2014/06/13 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
英语邀请函范文
2015/02/02 职场文书
合作合同协议书
2016/03/21 职场文书
javascript对象3个属性特征
2021/11/17 Javascript