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事件的更多相关文章

  1. 页面显示(pageshow)和页面隐藏(pagehide)事件

    Firefox和Opera有一个新特性,名叫“往返缓存”(back-forward cache,或bfcache),可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度.这个缓存中不仅保存 ...

  2. 监控页面后退前进,浏览器文档加载事件之pageshow、pagehide

    https://www.cnblogs.com/milo-wjh/p/6811868.html http://www.runoob.com/jsref/event-onpageshow.html on ...

  3. HTML5事件-pageshow 和 pagehide

    <!doctype html> <html> <head> <title>html5事件</title> <meta charset= ...

  4. 深入理解JavaScript 事件

    本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...

  5. JavaScript事件总结

    JavaScript 事件总结   本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加 ...

  6. JavaScript 事件总结

    本文总结自<JavaScript高级程序设计>以及自己平时的经验,针对较新浏览器以及 DOM3 级事件标准(2016年8月),对少部分内容作了更正,增加了各种例子及解析. 如无特殊说明,本 ...

  7. 《JavaScript高级程序设计》笔记:事件(十三)

    事件流 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).如下代码: <body> <div id="myDi ...

  8. event 事件2

    4.事件类型 “DOM3级事件”规定了一下几类事件: 1)UI事件(用户界面事件),当用户与页面元素交互时触发 2)焦点事件,当元素获得或失去焦点时触发 3)鼠标事件,当用户通过鼠标在页面上执行操作时 ...

  9. Javascript高级编程学习笔记(67)—— 事件(11)HTML5事件

    DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...

随机推荐

  1. ubuntu系统ssh遇到port 22:No route to host问题

    ssh遇到这个port 22:No route to host这个问题 检查防火墙状态 (iptables -L) 检查ssh状态 (ps -elf |grep ssh) 检查网络状态(换根网线)

  2. 数据节点-df 无法输出结果

    1. 删除了 a 机器的/opt/data 目录 2.b与c 机器挂载了 a机器的/opt/data 3.df -h 无法输出结果 最后参考:http://blog.csdn.net/lufeisan ...

  3. 78k的text 文件,输出到textbox 竟然用了20几秒的原因

    开始查资料以为是io读取的,磁盘速度慢的之类的,后来一想,text 又不是几十万条数据,才那么两千行,咋回事. 原来是循环中不停的修改textbox值导致的. 总结:  比较大的运算,特别是大的循环, ...

  4. Oracle 修改字段顺序的两种方法

    分类: Oracle 如果要修改字段顺序,一般情况可以使用以下步骤: --(1)备份目标表数据 create table 临时表 as select * from 目标表; --(2)drop 目标表 ...

  5. 体验godaddy域名转入,添加A记录,及使用dnspod的NS

    有两个域名一直放在朋友那,这个朋友是个神人,经常换电话号码,联系非常不方便. 近日将域名转入到godaddy下面了,第一次做域名转移,很是好奇. 之前域名在21.cn注册的,朋友帮我申请域名转出后,2 ...

  6. 20172325 2017-2018-2 《Java程序设计》第十一周学习总结

    20172325 2017-2018-2 <Java程序设计>第十一周学习总结 教材学习内容总结 Android简介 Android操作系统是一种多用户的Linux系统,每个应用程序作为单 ...

  7. MySQL连接、登录、密码等

    官方教程:https://dev.mysql.com/doc/refman/8.0/en/ 链接数据库,通过指定 -h 参数可以连接网络上的数据库 mysql -u 用户名 -h 服务器IP -P 端 ...

  8. How to reconfigure installed dpkg package (tzdata, locales)

    1 List the installed dpkg package $ sudo dpkg --list 2 Reconfigure the package $ sudo dpkg-reconfigu ...

  9. Servlet 2.x 规范

    Servlet 2.x 规范 sun 公司制订的一种基于 Java 技术的 WEB 服务器功能的组件规范.1997 年六月,Servlet 1.0 版本发行,最新版本 Servlet 4.0 处于研发 ...

  10. where

    (二)WHERE //where不单独使用,与match,optional match,start,with搭配 where 与match,optional match 一起用,表示约束 where ...