位置: 编程技术 - 正文

浅谈javascript中onbeforeunload与onunload事件(js中onunload)

编辑:rootadmin

推荐整理分享浅谈javascript中onbeforeunload与onunload事件(js中onunload),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js的onchange方法如何触发,javascript none,js中onchange啥意思,js中的onchange,js的onchange方法如何触发,js中的onload什么意思,js的onchange方法如何触发,javascript none,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

onbeforeunload与onunload事件

onbeforeunload定义和用法

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

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

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

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

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

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

使用方法:

或者:

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

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

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

浅谈javascript中onbeforeunload与onunload事件(js中onunload)

浏览器兼容情况

IE、Chrome、Safari 完美支持

Firefox 不支持文字提醒信息

Opera 不支持

IE6,IE7 使用 onbeforeunload 遇到的bug

2、onunload定义和用法

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

使用方法和onbeforeunload类似

浏览器兼容情况

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中new关键字详解 和其他高级语言一样javascript中也有new关键字,我们以前认知的new是用来创建一个类的实例对象,但在js中万物皆是对象,为何还要new关键字呢,其实js中

javascript中的3种继承实现方法 使用Object.create实现类式继承下面是官网的一个例子//Shape-superclassfunctionShape(){this.x=0;this.y=0;}Shape.prototype.move=function(x,y){this.x+=x;this.y+=y;console.info("Shapemoved.

JavaScript中的this,call,apply使用及区别详解 学习起因:在之前的JavaScript学习中,this,call,apply总是让我感到迷惑,但是他们的运用又非常的广泛。遂专门花了一天,来弄懂JavaScript的this,call,apply。中

标签: js中onunload

本文链接地址:https://www.jiuchutong.com/biancheng/369960.html 转载请保留说明!

上一篇:JavaScript的代码编写格式规范指南(javascript的代码写在哪里)

下一篇:javascript中new关键字详解(js new option)

  • 已认证进项税转出怎样做账务处理
  • 个人所得税是什么费用
  • 进口货物退货如何退税
  • 无形资产开发阶段计入什么科目
  • 企业所得税不预缴年终汇算可以吗
  • 如何查看增值税申报表
  • 个人所得税定期定额起征点
  • 员工出差有补助吗
  • 一般纳税人的税率是多少个点
  • 无货源发货如何填写物流单
  • 房地产公司产品无偿提供他人使用 税
  • 固定资产造成的损失可以税前扣除吗
  • 购入材料过程中支付运费
  • 一般纳税人购入商品取得普通发票
  • 自产产品用于捐赠的会计处理
  • 原材料入库是付款凭证吗
  • 持续经营损益怎么算
  • 公司向贷款公司贷款做账分录
  • 商品进销差价账户的用途性质及核算内容
  • 增值税专用发票使用规定 最新
  • 小规模纳税人预缴增值税
  • 进项税抵扣的房租怎么算
  • 负利润需要交所得税吗
  • 企业每月纳税申报流程
  • 矿产资源税是多少
  • 公司个税申报是什么意思
  • 房开企业增值税确认收入时间
  • 赠送的商品怎么入账
  • 小规模季超过30,增值税怎么收
  • 利息收入营业收入
  • 利润表营业成本是负数是什么原因
  • 固定资产折旧的会计凭证
  • php字符串赋值
  • macos字体
  • window7怎么开机
  • php bi
  • PHP:imagefilltoborder()的用法_GD库图像处理函数
  • 享受小型微利企业税收优惠的条件
  • 跨域的几种方法
  • 外贸企业收到红字发票
  • 【综述】分子预训练模型综述
  • nyud数据集
  • PHP中include/require/include_once/require_once使用心得
  • 卖出回购证券的钱怎么算
  • 织梦cms官网
  • 出口退税抵减应纳税额
  • 利润是非限定净现值吗
  • sql2012 win10
  • sqlldr 函数
  • 公司支付款项制度
  • 金税三期升级功能2020
  • 验资户和基本户账号一致么
  • 递延所得税资产和递延所得税负债
  • 自产产品赠送会计处理
  • 分享sql日期时间格式
  • sysbench测试mysql,自带的测试套
  • centos 命令
  • linux yum安装apache
  • adsl怎么设置上网
  • linux svn命令使用详解
  • Linux磁盘配额步骤
  • win8.1系统更新
  • win10资源管理器启动不了
  • 实现高性能化 两个字表达
  • data.table
  • srslte源码分析
  • 微信小程序实现文件上传
  • 我吐槽你
  • 怎么用批处理显示文字
  • python获取当前地址
  • unity字符串
  • 浏览器窗口上线怎么办
  • 朵朵舞百科
  • 铁路货运的费用有哪些
  • 职工教育经费可以结转吗
  • 贤彬考研,刘磊?
  • 山东省国家税务局官网
  • 西安车辆购置税缴纳多少
  • 税务局经费来源
  • 市民服务热线有用吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设