浅谈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 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
javascript中Number的方法小结
Nov 21 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
vue路由的配置和页面切换详解
Sep 09 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
PHP截取中文字符串的问题
2006/07/12 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
PHP图片上传代码
2013/11/04 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python tornado修改log输出方式
2019/11/18 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
2014小学教师个人工作总结
2014/11/10 职场文书
党员争先创优承诺书
2015/01/20 职场文书
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS