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

1.hashchange 事件

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

必須要把 hashchange 事件處理程序添加給 window 對象，然后 URL參數(shù)列表只要變化就會調用 它。此時的 event 對象應該額外包含兩個屬性：oldURL 和 newURL。這兩個屬性分別保存著參數(shù)列表 變化前后的完整 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 對象來確定當前的參數(shù)列表。

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

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

});

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

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

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

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

2. pageshow 和 pagehide 事件

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

第一個事件就是 pageshow，這個事件在頁面顯示時觸發(fā)，無論該頁面是否來自 bfcache。在重新加 載的頁面中，pageshow 會在 load 事件觸發(fā)后觸發(fā);而對于 bfcache中的頁面，pageshow 會在頁面狀 態(tài)完全恢復的那一刻觸發(fā)。另外要注意的是，雖然這個事件的目標是 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。此后，每當觸發(fā) pageshow 事件，showCount 的值就會遞增并通過警告框顯示 出來。如果你在離開包含以上代碼的頁面之后，又單擊“后退”按鈕返回該頁面，就會看到 showCount 每次遞增的值。這是因為該變量的狀態(tài)，乃至整個頁面的狀態(tài)，都被保存在了內存中，當你返回這個頁 面時，它們的狀態(tài)得到了恢復。如果你單擊了瀏覽器的“刷新”按鈕，那么 showCount 的值就會被重 置為 0，因為頁面已經(jīng)完全重新加載了。

除了通常的屬性之外，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 屬性，就可以根據(jù)頁面在 bfcache中的狀態(tài)來確定是否需要采取其他操作。 與 pageshow 事件對應的是 pagehide 事件，該事件會在瀏覽器卸載頁面的時候觸發(fā)，而且是在 unload 事件之前觸發(fā)。與 pageshow 事件一樣，pagehide 在 document 上面觸發(fā)，但其事件處理程 序必須要添加到 window 對象。這個事件的 event 對象也包含 persisted 屬性，不過其用途稍有不同。 來看下面的例子。

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

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

});

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

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

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

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