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. 血的教训:Protocol http not supported or disabled in libcurl

    报错显示:http not supported or disabled in libcurl 查看配置 curl -V ---------------------------------------- ...

  2. python读写剪贴板

    #coding:utf-8 import os import time import win32api import win32con import win32clipboard as w impor ...

  3. (OS 64)指定的网络名不再可用,winnt_accept: Asynchronous AcceptEx failed.

    在httpd.conf中添加 <IfModule mpm_winnt.c> ThreadsPerChild 150 MaxRequestsPerChild 10000 Win32Disab ...

  4. Linux驱动之内核加载模块过程分析

    Linux内核支持动态的加载模块运行:比如insmod first_drv.ko,这样就可以将模块加载到内核所在空间供应用程序调用.现在简单描述下insmod first_drv.ko的过程 1.in ...

  5. CORBA简介

    使用.NET开发corba应用 一. 什么是IIOP.NET IIOP.NET 是通过使用基于corba的IIOP支持.NET.javaEE和corba组件实现无缝互操作的技术.如图1.1所示,这种解 ...

  6. PAT 1045 快速排序(25)(STL-set+思路+测试点分析)

    1045 快速排序(25)(25 分) 著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一个元素作为主元,通过交换,把比主元小的元素放到它的左边,比主元大的元素放到它的右边. 给定划分 ...

  7. uva 103(最长递增子序列) Stacking Boxes

    大意是有一些n维的物体,他的边也是n条,如果将一个物体的边按任意顺序排列,只要有一种排列满足一一对应小于另一物体的边,就可以将这个物体嵌套进去另一个物体中,文最多能连续嵌套几个物体. 所求的最多的连续 ...

  8. Docker原生网络技术简介

    Docker原生网络技术简介 默认网络 在宿主机部署好Docker Engine后会默认创建三种网络:Bridge.Host和None,如下: docker network ls NETWORK ID ...

  9. AngularJS 高级程序设计

    1.5.4 安装Web服务器 原来的: connect.static("../angularjs"); 报错.可以修改为: var connect = require('conne ...

  10. Luogu 3690 LCT - 模板

    推荐几篇比较好的博客: FlashHu 的 讲解比较好 : 传送门 Candy 的 代码~ : 传送门 以及神犇Angel_Kitty的 学习笔记: 传送门 Code V 模板 #include< ...