JS事件—unload、beforeunload
unload和beforeunload是在窗口卸载的时候会触发,可以在用户刷新或者关闭窗口的时候处理一些逻辑,如果在两个事件监听中添加 alert、confirm、prompt会忽略,所以我们想提示用户或者想调试一下这种方法是不可行的,要是在事件中添加debugger,窗口关闭的时候可以跟进断点,但是刷新的时候断点也被忽略了。废话少说直接上测试代码
//以两种方式去绑定事件,事件触发写在本地存储中
window.onunload = function(){localStorage.setItem("onunload","window.unload");
}
window.onbeforeunload = function(){localStorage.setItem("onbeforeunload","window.beforeunload");
}window.addEventListener('unload', ()=>{localStorage.setItem("unload","addEventListener.unload");
});
window.addEventListener('beforeunload', ()=>{localStorage.setItem("beforeunload","addEventListener.beforeunload");
});
来看一下在Chrome浏览器中的测试结果(刷新关闭效果一样)
在看一下在Firefox中的测试结果(刷新关闭效果一样)
IE请自行测试吧。那结论就是,都会触发beforeunload和unload事件,但是两者唯一的区别就是,对于Firefox来说永远先执行window.onbeforeunload然后在执行add绑定的beforeunload,unload两者一致。想了解更多点击事件参考|MDN。
顺带在补充一点吧,我们平时如果有一些socket连接,或者需要大量计算,当我们考虑到浏览器关闭或窗口隐藏切换节省性能时,我们可以监听窗口的状态去暂停一些计算或者请求
document.addEventListener('visibilitychange', ()=>{if(document.visibilityState === 'hidden') {console.log('检测当前浏览器为关闭状态');} else {console.log('检测当前浏览器为开启状态');}
);
---------- 2019.07.01----------
今天在刷知乎的时候看到一篇页面卸载发送Ajax请求的文章,所以也想把学习的补充进来,我们首先想到的就是
var oAjax = new XMLHttpRequest();oAjax.open('POST', 'http://127.0.0.1:8686/user/register', false); oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");oAjax.onreadystatechange = function() {if(oAjax.readyState == 4 && oAjax.status == 200) {console.log(oAjax.responseText);} else {console.log(oAjax);}
};oAjax.send('a=1&b=2');
还有一种方法
window.addEventListener("beforeunload", function(event) {var blob = new Blob(['room_id=123'], {type: 'application/x-www-form-urlencoded'});navigator.sendBeacon("http://127.0.0.1:8686/user/register", blob);
});
根据知乎作者的意思,当浏览器触发unload时会abort文档,所以他设置同步的ajax请求,但是这样会导致用户体验不友好,关闭有延迟,我在测试时在beforeunload中同步异步均可收到页面的请求。navigator.sendBeacon是一个相对保险的,它主要就是为了这种情况而建立的。
参考链接:https://zhuanlan.zhihu.com/p/68838820
JS事件—unload、beforeunload相关推荐
- js事件流、事件代理等
菜菜的自己发现真的啥都不太懂 - 虽然啥都会一点,但是却什么都不精通. 偶然看见js事件流和事件代理等 - 黑人问号脸,虽然在实际写代码的时候经常用到. 做个总结: 都是学的别人的. 事件代理:通过将 ...
- js 事件学习与总结
一.(1)事件源(事件目标):在哪个组件上发生的事件,也就是发生事件的作用体或与之相关的对象.任何元素,body,html元素等等,都可以作为事件源. (2)事件:事件就是用户或浏览器自身执行的某种动 ...
- js 监听 安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输 使用场景 类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息 技术原理 跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...
- Linux事件循环阻塞,深入浅析Node.js 事件循环、定时器和process.nextTick()
什么是事件循环 尽管JavaScript是单线程的,但通过尽可能将操作放到系统内核执行,事件循环允许Node.js执行非阻塞I/O操作. 由于现代大多数内核都是多线程的,因此它们可以处理在后台执行的多 ...
- 给RadioButtonList这些加JS事件
给RadioButtonList这些加JS事件 <script language="javascript" type="text/javascript&qu ...
- JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){resizeTo(640,480);//设置浏览器窗口尺寸moveTo( ...
- JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...
- js事件之神奇的onclick
21:58 2013/7/1 <a href="#" οnclick="alert(123124);" >链接</a> 意思是鼠标点击链 ...
最新文章
- CentOS7下Firewall 开放指定端口
- pandas自定义设置dataframe每个索引的标签、自定义设置索引的列名称(customize index name and index label)
- python复数类型-python复数类型
- 线程间通讯机制(基础篇)——Handler、Runnable、HandlerThread、AsyncTask的使用
- 统计学习方法第十四章作业:聚类—层次聚类聚合/分裂算法、K_means聚类算法 代码实现
- 【云栖大会夺宝攻略】在线PK、打卡领奖、抢offer,开发者专属玩法在这里
- JavaScript中的数组和字符串
- 线性跟驰模型 matlab,Bierley非线性跟驰模型特性仿真分析
- .Net 强名称签名程序集
- 熟悉linux运行环境,实验一 熟悉Ubuntu环境
- Excel的一点小事
- (79)Vivado创建约束的方法
- 2019.08.29定时器以及轮播图
- favicon.ico在ie下面不显示的解决方法
- php fopen 清空文件内容,如何在c语言中清空文件里的内容?
- UVa834 Continued Fractions【连分数】
- Android 内存数据库
- 再回首Java第二十二天
- linux常用命令,亲测可用
- 盘点下玩过的解谜游戏
热门文章
- vue-cli3的项目 CDN链接报错解决 Uncaught TypeError: Cannot read property 'prototype' of undefined at Object.
- B站陈睿说:“B站也是个学习APP”!亲测还很好学
- GB28181开发(二) pjsip库SDP协议扩展
- java实现word文件合并
- 关于github的license选择
- HDOJ1495 非常可乐(bfs)
- 基于mini2440嵌入式linux上整合一套Domoticz智能家居系统(八)使用domoticz+mosquitto+Android客户端实现控制mini2440上的LED(一)
- 虹科技术 | 终端入侵防御 | 在重大攻击中发现新的Babuk勒索软件
- 解放前端工程师——手把手教你开发自己的自定义列表和自定义表单系列之二接口
- 【循环自相关和循环谱系列6】信号的循环平稳性(循环自相关函数)基本原理及推导