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列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...
随机推荐
- webpack(二) 根据模板生成简单的html文件
(一)使用webpack 根据模板生成HTML,首先需要安装插件 html-webpack-plugin. 在工程文件夹安装插件 命令如下: npm install html-webpack-plug ...
- public void method(),void前面的泛型T是什么
public <T>这个T是个修饰符的功能,表示是个泛型方法,就像有static修饰的方法是个静态方法一样. 注意<T> 不是返回值,此处的返回值是void ,此处的<T ...
- 为ListView的子列表添加不同的响应事件
如何实现当点击不同的listView中的每个子列表出发不同的事件? 当在布局中,设置对应的ListView主布局及对应子布局时,在Activity中向ListView中添加子列表,利用每个子列表的Po ...
- MBP 使用笔记
1.svn下载指令(终端) svn checkout https://svn.openslam.org/data/svn/gmapping 参考:http://blog.csdn.net/q19910 ...
- 安装nginx流程
1.下载nginx压缩包: 下载nginx:http://nginx.org/en/download.html 本教程下载 nginx-1.14.0.zip(http://nginx.org/down ...
- 转:css知多少(1)——我来问你来答
1. 引言 各位前端或者伪前端(比如作者本人)的同志们,css对你们来说不是很陌生.比如我,在几年之前上大学的时候,给外面做网站就用css,而且必须用css.这样算下来也得六年多了,有些功能可能轻车熟 ...
- 主机在无线网络的情况下,设置centos7.2虚拟机网络联通
1.vmvare中,编辑-虚拟网络编辑器 2.虚拟机设置 3.进入linux登录后 输入nmtui 4激活连接 5大功告成,输入ping www.baidu.com 发现ping通了
- win32多线程程序设计
标题是一本书名,写得挺有意思的,是今天早上同事带过来的,我借过来看了一会儿. 然后按照书里面前面几章的内容敲了一些代码,跑了几个例子看了一下. 创建线程的函数: HANDLE CreateThread ...
- Vsphere初试——架设Panabit行为管理
Panabit是目前国内X86平台单板处理能力最高(双向40G).提供免费版本(软件形态),是以DPI为核心优势并发展起来的最专业.上线效果最好.性价比最高的新一代应用网关.Panabit流控引擎,基 ...
- UI设计技术分享:教你几个设计技巧让老板对你的设计赞不绝口
我们做任何设计都离不开大小与重复的运用,这样能使我们的设计更加理性和科学,经得起推敲,那么我们一起来探讨下如何在产品设计中运用这一方法. 为什么大的物体更吸引眼球 ▲如上图所示,a球会比右边b球 ...