頁面顯示(pageshow)和頁面隱藏(pagehide)事件

Firefox和Opera有一個新特性，名叫“往返緩存”（back-forward cache，或bfcache），可以在用戶使用瀏覽器的“后退”和“前進”按鈕時加快頁面的轉換速度。這個緩存中不僅保存着頁面數據，還保存了DOM和JavaScript的狀態；實際上是將整個頁面都保存在了內存里。如果頁面位於bfcache中，那么再次打開該頁面就不會觸發load事件。盡管由於內存中保存了整個頁面的狀態，不觸發load事件也不應該會導致什么問題，但為了更形象地說明bfcache的行為，Firefox還是提供了一些新事件。

第一個事件就是pageshow，這個事件在頁面顯示時觸發，無論頁面是否來自bfcache。在重新加載頁面中，pageshow會在load事件觸發后觸發；而對於bfcache中的頁面，pageshow會在頁面狀態完全恢復的那一刻觸發。另外要注意的是，雖然這個事件的目標是document，但必須將其事件處理程序添加到window。來看下面的例子：

var EventUtil = {     addHandler: function (element, type, handler) {         if (element.addEventListener) {             element.addEventListener(type, handler, false);         } else if (element.attachEvent) {             element.attachEvent("on" + type, handler);         } else {             element["on" + type] = handler;         }     } }; (function () {     var showCount = 0;     EventUtil.addHandler(window, "load", function () {         alert("Load fired");     });     EventUtil.addHandler(window, "pageshow", function (event) {         showCount++;         alert("Show has been fired " + showCount + " times.");     }); })();

這個例子使用了私有作用域，以防止變量showCount進入全局作用域。當頁面首次加載完成時，showCount的值為0。此后，每當觸發pageshow事件，showCount的值就會遞增並通過警告框顯示出來。如果你在離開包含以上代碼的頁面之后，又單擊“后退”按鈕返回該頁面，就會看到showCount每次遞增的值。這是因為該變量的狀態，乃至整個頁面的狀態，都保存在了內存中，當你返回這個頁面時，它們的狀態得到了恢復。如果你單擊了瀏覽器的“刷新”按鈕，那么showCount的值會被重置為0，因為頁面已經完全重新加載了。

除了通常的屬性之外，pageshow事件的event對象還包含一個名為persisted的布爾值屬性。如果頁面中保存在了bfcache中，則這個屬性的值為true；否則，這個屬性的值為false。可以像下面這樣在事件處理程序中檢測這個屬性：

var EventUtil = {     addHandler: function (element, type, handler) {         if (element.addEventListener) {             element.addEventListener(type, handler, false);         } else if (element.attachEvent) {             element.attachEvent("on" + type, handler);         } else {             element["on" + type] = handler;         }     } }; (function () {     var showCount = 0;     EventUtil.addHandler(window, "load", function () {         alert("Load fired");     });     EventUtil.addHandler(window, "pageshow", function (event) {         showCount++;         alert("Show has been fired " + showCount + " times.Persisted? " + event.persisted);     }); })();

通過檢測persisted屬性，就可以根據頁面在bfcache中的狀態來確定是否需要采取其它操作。

與pageshow事件對應的是pagehide事件，該事件會在瀏覽器卸載頁面的時候觸發，而且是在unload事件之前觸發。與pageshow事件一樣，pagehide在document上面觸發，但其事件處理程序必須要添加到Windows對象。這個事件的event對象也包含persisted屬性，不過其用途稍有不同，來看下面的例子：

var EventUtil = {     addHandler: function (element, type, handler) {         if (element.addEventListener) {             element.addEventListener(type, handler, false);         } else if (element.attachEvent) {             element.attachEvent("on" + type, handler);         } else {             element["on" + type] = handler;         }     } }; EventUtil.addHandler(window, "pagehide", function (event) {     alert("Hiding. Persisted? " + event.persisted); });

有時候，可能需要在pagehide事件觸發時根據persisted的值采取不同的操作。對於pageshow事件，如果頁面是從bfcache中加載的，那么persisted的值就是true；對於pagehide事件，如果頁面在加載之后會保存在bfcache中，那么persisted的值也會被設置為ture。因此，當第一次觸發pageshow時，persisted的值一定是false，而在第一次觸發pagehide時，persisted就會變成true(除非頁面不會保存在bfcache中)。

指定了onunload事件處理程序的頁面會被自動排除在bfcache之外，即使事件處理程序是空的。原因在於，onunload最常用於撤銷在onload中所執行的操作，而跳過onload后再次顯示頁面很可能會導致頁面不正常。