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. win8 IIS配置

    iis发展到win8已经到是iis8.0了.至于如何安装的,咱们接下来看.大体和iis6安装差别不大.iis8安装起来也是很方便的. 1.打开“控制面板”——“程序和功能”.如下图所示 2.点击“启用 ...

  2. golang 创建一个简单的资源池,重用资源,减少GC负担

    package main; import ( "sync" "errors" "fmt" ) //代码参考<Go语言实战>中第7 ...

  3. centos7下的FastDFS5.09的安装与使用

    FastDFS是一款开源的轻量级分布式文件系统,纯C实现,支持Linux.FreeBSD等Unix系统. 类google FS,不是通用的文件系统,只能通过专有API访问. FastDFS服务端有两种 ...

  4. PHP开发——常见问题

    执行顺序 常见数据类型 字符乱码

  5. Oracle_SQL(5) 连接和子查询

    一.连接join一般分类: inner join: 内连接,又叫等值连接,只返回两个表中连接字段相等的行. left join :左连接,返回左表中所有的记录以及右表中连接字段相等的记录. right ...

  6. js数据类型和变量

    Number JavaScript不区分整数和浮点数,统一用Number表示: 123 0.345 -99 NaN 当无法计算结果时用NaN表示 Infinity 表示无限大,当数值超过js的Numb ...

  7. 基于spring boot的统一异常处理

    一.springboot的默认异常处理 Spring Boot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用来展示异常内容. 例如这里我 ...

  8. (转)ScriptManager.RegisterStartupScript方法和Page.ClientScript.RegisterStartupScript() 方法

    ScriptManager.RegisterStartupScript方法 如果页面中不用Ajax,cs中运行某段js代码方式可以是: Page.ClientScript.RegisterStartu ...

  9. PAT 1086 就不告诉你(15 )(代码)

    1086 就不告诉你(15 分) 做作业的时候,邻座的小盆友问你:"五乘以七等于多少?"你应该不失礼貌地围笑着告诉他:"五十三."本题就要求你,对任何一对给定的 ...

  10. PAT 1021 个位数统计 (15)(C++&Java&Python)

    1021 个位数统计 (15)(15 分) 给定一个k位整数N = d~k-1~*10^k-1^ + ... + d~1~*10^1^ + d~0~ (0<=d~i~<=9, i=0,.. ...