firefox 1.5 开始在一个浏览器会话中通过内存来缓存整个网页,包括它们的javascript状态。在已访问的页面中使用前进和后退不会触发页面加载,并且 javascript的状态都会被保留。这个特点被称为 bfcache( back-forward cache), 它使得页面导航变得更加快速。这个缓存状态将一直保留直到用户关闭了浏览器。
有些情况下,firefox不会缓存页面。下面是一些firefox不缓存页面的常见原因:
页面使用了 unload 或者 beforeload 事件句柄
页面设置了 cache-control: no-store
网站采用了Https 并且至少设置如下一条:
(1)Cache-Control: no-cache
(2)Pragma: no-cache
(3)使用了Expires: 0 或者 Expires 的值被被设置为当前页面头date属性内时间的过去时间(除非Cache-Control: max-age=同时指定)
4.页面还未加载完成用户就从页面离开,或者其他原因(XMLHttpRequest)
- 该页面已运行索引型数据库的事务
- 顶级页面中包含框架(例如iframe),且框架中有此处列举的任何一条。
- 页面在框架中,用户通过这个框架加载了一个新的页面(这个情况下,当用户离开这个页面,最后插入一个这个框架的内容将会被缓存)
这种新的缓存机制改变了页面加载行为,web开发者可能想:
了解一个页面是否已经访问过(什么时候页面是从缓存中加载)
当用户从离开一个页面时定义页面的行为(同时还使得页面被缓存)
两个新的浏览器事件允许开发者这么做。
##新的浏览器事件
如果你使用这些新的事件,你的页面仍然会在其他浏览器中正确显示(我们已经测试过了早期版本的firefox,ie,opera 和 safari),当页面在firefox1.5中加载时就会使用这个新的缓存机制。
注意:10–2009 safari的开发者版本中增加了对这些新事件的支持。
标准的网页行为是这样的:
用户浏览这个页面
页面的脚本在页面加载时执行
页面加载完毕后,onload句柄触发
有些页面有第四步。如果页面使用了unload或beforeunload句柄,用户离开页面时会触发它们。如果unload句柄存在,页面就不会被缓存。
当用户浏览到缓存过的页面,页面的脚本和onload句柄不会运行(第2,3步),大多数情况下,这些脚本的效果将会被保留。
如果一个页面包含部分脚本在用户每次浏览到页面时都想继续运行,或者你想知道用户什么时候浏览到了一个缓存过的页面,可以使用新的 pageshow 事件。
如果当用户离开页面时有一些行为想要触发,你想利用这个新的缓存机制但并打算使用unload句柄时,可以使用新的pagehide事件。 pageshow event
这个事件和load事件类似,不同的是这个事件在页面加载后每次都会触发。(如果页面被缓存,load事件在firefox 1.5中不会被触发)页面首次加载时,pageshow事件会在load事件触发后运行。pageshow事件包含了一个名为 persisted的属性,值是 布尔,初始化加载时,这个属性的值是false(换句话说,页面如果被缓存,这个值就是true)。
在pageshow事件触发时加入你想在页面加载时每次都执行的脚本。
##pagehide event
如果你要定义用户离开页面的行为,但是又不希望使用unload事件(unload事件会使得页面不会被缓存),你可以使用新的pagehide事 件。类似pageshow,pagehide也使用了一个名叫persisted的属性,页面如果没有被缓存,值为false,反之为true。如果这个 值为false, unload句柄会在pagehide事件触发后立即执行。
在初始化加载页面时,firefox试图以相同的顺序来触发事件。框架处理的方式与顶级文档是相同的。如果页面包含框架,那么当缓存的页面加载时:
框架中的pageshow事件会在主文档的pageshow事件之后触发
当用户离开一个缓存过的页面,框架中的pagehide事件会在主文档的pagehide事件之前触发。
框架中的页面变化时,事件只会在这个框架中触发。
无视unload和beforeunload事件缓存页面
如果你希望在使用unload或者beforeunload事件的同时保留页面缓存机制,那么你可以在回到这个页面时在pageshow事件中添加他们。
window.addEventListener(‘pageshow‘, PageShowHandler, false);
window.addEventListener(‘unload‘, UnloadHandler, false);
function PageShowHandler() {
window.addEventListener(‘unload‘, UnloadHandler, false);
}
function UnloadHandler() {
window.removeEventListener(‘unload‘, UnloadHandler, false);
}
示例代码
下面的示例中页面同时使用了load和pageshow事件,页面的行为如下:
在firefox1.5以外的浏览器中,页面每次加载时均会发生:load事件触发onLoad方法,同时调用onpageshow方法
在firefox1.5中,页面首次加载时,load事件与其他浏览器一样。当persisted属性为true时,只有pageshow事件会触发。
在firefox1.5中,当页面从缓存中加载时,只有pageshow事件会触发。当persisted为true时,只有在onPageShow中的脚本才会执行。
在这个例子中:
页面加载时会显示当前的时间。时间会精确到毫秒,这样你就可以很方便地测试功能。
在页面首次加载时,鼠标会定位到name字段中。在firefox1.5内,当用户返回到这个页面,光标会停留在用户离开时所在的位置,在其他浏览器中,光标将被重新放置在name字段中。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<head>
<title>Order query Firefox 1.5 Example</title>
<style type="text/css">
body, p {
font-family: Verdana, sans-serif;
font-size: 12px;
}
</style>
<script type="text/javascript">
function onLoad() {
loadOnlyFirst();
onPageShow();
}
function onPageShow() {
//calculate current time
var currentTime= new Date();
var year=currentTime.getFullYear();
var month=currentTime.getMonth()+1;
var day=currentTime.getDate();
var hour=currentTime.getHours();
var min=currentTime.getMinutes();
var sec=currentTime.getSeconds();
var mil=currentTime.getMilliseconds();
var displayTime = (month + "/" + day + "/" + year + " " +
hour + ":" + min + ":" + sec + ":" + mil);
document.getElementById("timefield").value=displayTime;
}
function loadOnlyFirst() {
document.zipForm.name.focus();
}
</script>
</head>
<body n">onLoad();" onpageshow="if (event.persisted) onPageShow();">
<h2>Order query</h2>
<form name="zipForm" action="http://www.example.com/formresult.html" method="get">
<label for="timefield">Date and time:</label>
<input type="text" id="timefield"><br>
<label for="name">Name:</label>
<input type="text" id="name"><br>
<label for="address">Email address:</label>
<input type="text" id="address"><br>
<label for="order">Order number:</label>
<input type="text" id="order"><br>
<input type="submit" name="submit" value="Submit Query">
</form>
</body>
</html>
与此相反,当这个页面没有监听pageshow事件,并且把所有的方法都放置在load事件中,则光标位置和时间都会被缓存。当用户返回这个页面时,显示将是缓存中的时间。
<script>
function onLoad() {
loadOnlyFirst();
//calculate current time
var currentTime= new Date();
var year = currentTime.getFullYear();
var month = currentTime.getMonth()+1;
var day = currentTime.getDate();
var hour=currentTime.getHours();
var min=currentTime.getMinutes();
var sec=currentTime.getSeconds();
var mil=currentTime.getMilliseconds();
var displayTime = (month + "/" + day + "/" + year + " " +
hour + ":" + min + ":" + sec + ":" + mil);
document.getElementById("timefield").value=displayTime;
}
function loadOnlyFirst() {
document.zipForm.name.focus();
}
</script>
</head>
<body onload="onLoad();">
##开发firefox插件
firefox1.5的扩展需要开启这个缓存机制。当你在开发与firefox1.5及早期firefox版本兼容的扩展时,确保load事件会被缓存,pageshow事件不会被缓存。