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

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

onbeforeunload与onunload事件

onbeforeunload定义和用法

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

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

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

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

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

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

使用方法:

1、

<!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 任何情况都不执行。

 

【原】js离开页面执行函数 onbeforeunload与onunload事件的更多相关文章

  1. JS 的立即执行函数

    JS 的立即执行函数 本文写于 2019 年 12 月 7 日 其实 ES6 之后有了之后,很多之前的用法都没必要了,立即执行函数就是其一. 今天看到一道面试题: 请「用自己的语言」简述 立即执行函数 ...

  2. js匿名自执行函数中闭包的高级使用(---------------------------******-----------------------------)

    先看看最常见的一个问题: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. js 离开页面

    序言 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.这里面的实现过程 ...

  4. JS中立即执行函数的理解

    1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: U ...

  5. js中立即执行函数写法理解

    在理解了一些函数基本概念后,回头看看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法,最初我以为是一个括号包裹匿名函数, 并后面加个括号立即调 ...

  6. js匿名自执行函数

    匿名自执行函数:没有方法名的函数闭包:闭包是指有权访问另一个函数作用域变量的函数: 通过一个实例来解释: 从网上找到了一个案例,使用了for循环.匿名自执行函数.setTimeout. 案例1: va ...

  7. js的立即执行函数

    立即执行函数:常用于第三方库,好处在于隔离作用域,任何一个第三方库都会存在大量的变量和函数,为了避免变量污染(命名冲突),一般想到的方法就是使用立即执行函数.jQuery就是使用的立即执行函数. 函数 ...

  8. onbeforeunload与onunload事件

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过 window.onunload来指定或者在<body>里指定.区别在于o ...

  9. js中自执行函数(function(){})()和(function(){}())区别

    方式一,调用函数,得到返回值.强制函数直接量执行再返回一个引用,引用在去调用执行方式二,调用函数,得到返回值.强制运算符使函数调用执行(function(){})(); 是 把函数当作表达式解析,然后 ...

随机推荐

  1. jsp还是html+ajax

    1.有人说JSP会泄露源码(可能会有一些代码痕迹,但肯定没啥大事)2.又说,Ajax是为了分离前后台,让控制部分在前台处理,降低代码耦合度,后台只相当于服务. 3.能够让前台移植,降低后期维护成本.纯 ...

  2. Sharepoint 杂记

    在Sharepoint中复制Settle.html,粘贴后改名为km.html,修改km.html会自动更新km.master,修改好模板后需要在站点发布. 添加List添加WebPart,继承KmW ...

  3. hibernate用setResultTransformer转换

    当你用hibernate查出数据,但是类型不是原来的类型怎么办,新增的实体类还可以用,query.setResultTransformer(Transformers.aliasToBean(AA.cl ...

  4. 【BZOJ 4515】【SDOI 2016 Round1 Day1 T3】游戏

    考场上写了lct,可惜当时对标记永久化的理解并不是十分深刻,导致调一个错误的程序调了4h+,最后这道题爆0了QwQ 现在写了树链剖分,用标记永久化的线段树维护轻重链,对于$s\rightarrow l ...

  5. mysql-数据类型与java数据类型转化工具类

    mysql和java对照表 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述             VARCHAR L+N VARCHAR java.lang.Stri ...

  6. httpclient提示Cookie rejected: violates RFC 2109: domain must start with a dot

    使用httpclient时发生如下告警信息: WARN - HttpMethodBase.processResponseHeaders(1505) | Cookie rejected: "$ ...

  7. 进程间通信方式与Binder机制原理

    1, Intent隐式意图携带数据 2, AIDL(Binder) 3, 广播BroadCast 4, 内容提供者ContentProvider --------------------------- ...

  8. C#-WebForm-★ 上传水印图片 ★

    上传水印图片就是一个选择图片.添加水印.进行上传的过程 绘制图片需要准备: 画布 - 大小 笔 - 颜色.粗细.样式 用什么字体 要画什么(李献策lxc) 步骤: 一.引用 System.Drawin ...

  9. PyCharm2016.23专业版注册码

    43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...

  10. java内存管理机制

    JAVA 内存管理总结 1. java是如何管理内存的 Java的内存管理就是对象的分配和释放问题.(两部分) 分配 :内存的分配是由程序完成的,程序员需要通过关键字new 为每个对象申请内存空间 ( ...