在移動端做單頁切換時，hashchange事件就會經常用到，例如：點擊相冊中某一張圖片時，瀏覽完成后需要返回，那我們就需要響應hashchange事件。接下由南昌網站制作公司百恒網絡前端開發工程師向大家介紹hashchange事件及pageshow 和 pagehide 事件 ，希望對開發人員有所幫助。

1.hashchange 事件

HTML5新增了 hashchange 事件，以便在 URL的參數列表(及 URL中“#”號后面的所有字符串) 發生變化時通知開發人員。之所以新增這個事件，是因為在 Ajax應用中，開發人員經常要利用 URL參 數列表來保存狀態或導航信息。

必須要把 hashchange 事件處理程序添加給 window 對象，然后 URL參數列表只要變化就會調用 它。此時的 event 對象應該額外包含兩個屬性：oldURL 和 newURL。這兩個屬性分別保存著參數列表 變化前后的完整 URL。例如：

EventUtil.addHandler(window, "hashchange", function(event){

alert("Old URL: " + event.oldURL + "nNew URL: " + event.newURL); });

支持 hashchange 事件的瀏覽器有 IE8+、Firefox 3.6+、Safari 5+、Chrome和 Opera 10.6+。在這些 瀏覽器中，只有 Firefox 6+、Chrome和 Opera支持 oldURL 和 newURL 屬性。為此，好是使用 location 對象來確定當前的參數列表。

EventUtil.addHandler(window, "hashchange", function(event){

alert("Current hash: " + location.hash);

});

使用以下代碼可以檢測瀏覽器是否支持 hashchange 事件：

var isSupported = ("onhashchange" in window); //這里有 bug

如果 IE8 是在 IE7 文檔模式下運行，即使功能無效它也會返回 true。為解決這個問題南昌APP開發公司百恒網絡開發工程師建議大使用以下這個更穩妥的檢測方式：

var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);

2. pageshow 和 pagehide 事件

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

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

(function(){

var showCount = 0;

EventUtil.addHandler(window, "load", function(){

alert("Load fired");

});

EventUtil.addHandler(window, "pageshow", function(){

showCount++;

alert("Show has been fired " + showCount + " times. ");

});

})();

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

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

(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);

});

EventUtil.addHandler(window, "pagehide", function(event){

alert("Hiding. Persisted? " + event.persisted);

});

})();

通過檢測 persisted 屬性，就可以根據頁面在 bfcache中的狀態來確定是否需要采取其他操作。 與 pageshow 事件對應的是 pagehide 事件，該事件會在瀏覽器卸載頁面的時候觸發，而且是在 unload 事件之前觸發。與 pageshow 事件一樣，pagehide 在 document 上面觸發，但其事件處理程 序必須要添加到 window 對象。這個事件的 event 對象也包含 persisted 屬性，不過其用途稍有不同。 來看下面的例子。

EventUtil.addHandler(window, "pagehide", function(event){

alert("Hiding. Persisted? " + event.persisted);

});

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

支持 pageshow 和 pagehide 事件的瀏覽器有 Firefox、Safari 5+、Chrome和 Opera。IE9及之前版 本不支持這兩個事件。

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

本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣大技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡http://www.51yjwy.com/如轉載請注明出處!