pageshow和pagehide事件
Firefox和opera有一个特性,往返缓存:可以在用户使用浏览器的后退和前进按钮时加快页面的转换速度,这个缓存不仅保存了页面的数据,还有DOM和JavaScript的状态。
为了更形象的说明bfcache的行为,Firefox提供了新事件:
虽然这些事件的目标是document,但是必须把事件处理程序添加到window上。
实例:
(function(EventUtil){
var showCount = 0;
EventUtil.addHandler(window, 'load', function(){
alert('Load fired');
});
EventUtil.addHandler(window, 'pageshow', function(event){
event = EventUtil.getEvent(event);
showCount++;
alert('Show has been fired '+showCount + ' times. '+event.persisted);
});
})(EventUtil)
pageshow定义和用法
onpageshow 事件在用户浏览网页时触发。
onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。
为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false
pagehide定义和用法
onpagehide 事件在用户离开网页时触发。
离开网页有多种方式。如点击一个链接,刷新页面,提交表单,关闭浏览器等。.
onpagehide 事件有时可以替代 onunload 事件,但 onunload 事件触发后无法缓存页面。
为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false 。
不支持冒泡
指定了onunload事件的处理程序的页面会被自动排除在bfcache之外,即使事件处理程序是空的,原因在于:onunload最常用撤销onload中所执行的操作,而跳过onload后再次显示页面很可能就会导致页面不正常
pageshow和pagehide事件的更多相关文章
- 页面显示(pageshow)和页面隐藏(pagehide)事件
Firefox和Opera有一个新特性,名叫“往返缓存”(back-forward cache,或bfcache),可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度.这个缓存中不仅保存 ...
- 监控页面后退前进,浏览器文档加载事件之pageshow、pagehide
https://www.cnblogs.com/milo-wjh/p/6811868.html http://www.runoob.com/jsref/event-onpageshow.html on ...
- HTML5事件-pageshow 和 pagehide
<!doctype html> <html> <head> <title>html5事件</title> <meta charset= ...
- 深入理解JavaScript 事件
本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...
- JavaScript事件总结
JavaScript 事件总结 本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加 ...
- JavaScript 事件总结
本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...
- 《JavaScript高级程序设计》笔记:事件(十三)
事件流 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).如下代码: <body> <div id="myDi ...
- event 事件2
4.事件类型 “DOM3级事件”规定了一下几类事件: 1)UI事件(用户界面事件),当用户与页面元素交互时触发 2)焦点事件,当元素获得或失去焦点时触发 3)鼠标事件,当用户通过鼠标在页面上执行操作时 ...
- Javascript高级编程学习笔记(67)—— 事件(11)HTML5事件
DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...
随机推荐
- css定位研究
css的定位是很重要的一个知识点,要学会网页布局,一定要先把定位弄清楚,今天抽空整理一下这方面的知识. 1.块级元素和行内元素(内联元素) 块级元素:display值为block的元素就是块级元素,比 ...
- swift - 启动APP 黑屏
https://blog.csdn.net/chengkaizone/article/details/50478045
- git删除提交历史
精准入口==>官方文档 Q:我们在提交代码时,把密码或者敏感信息也提交了,怎么办? A:“在本地删除密码或敏感信息后,再push到远程仓库” Q:"但这样删除后,在仓库的commit历 ...
- linux查看目录下所有文件内容中是否包含某个字符串
转发自:http://blog.csdn.net/yimingsilence/article/details/76071949 查找目录下的所有文件中是否含有某个字符串 find .|xargs gr ...
- 5-Error:failed to find Build Tools revision 28.0.0 rc1解决方案
将app下面的build.gradle中的版本改为你安装的 sdk 版本:
- Win10以管理员身份启动cmd.exe
PowerShell -windowstyle hidden -Command "Start-Process cmd.exe -ArgumentList '/s,/k, pushd' -Ve ...
- mysql lost connection to server during query
vim /etc/mysql/mysql.conf.d/mysqld.cnf [mysqld]#3600000/1000=3600秒=1小时 wait_timeout =3600000#2G缓冲max ...
- js计算日期增加
<div class="time"> <i class="visa_icon prev"></i><span id=& ...
- bootstrap collapse 无法收回
$(function () { //修复collapse不能正常折叠的问题 $(".collapsed").click(function () { var itemHref = $ ...
- ListView的自定义适配器及其优化(listView序号混乱问题的处理)
ListView是最常使用的android组件之一,关于listView的优化问题刚刚了解了一些,在这里做出总结. PS:如果想让ListView中的item根据数据内容显示item的大小,需要在it ...