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

1.hashchange 事件

HTML5新增了 hashchange 事件，以便在 URL的參數(shù)列表(及 URL中“#”號(hào)后面的所有字符串) 發(fā)生變化時(shí)通知開(kāi)發(fā)人員。之所以新增這個(gè)事件，是因?yàn)樵?Ajax應(yīng)用中，開(kāi)發(fā)人員經(jīng)常要利用 URL參 數(shù)列表來(lái)保存狀態(tài)或?qū)Ш叫畔ⅰ?

必須要把 hashchange 事件處理程序添加給 window 對(duì)象，然后 URL參數(shù)列表只要變化就會(huì)調(diào)用 它。此時(shí)的 event 對(duì)象應(yīng)該額外包含兩個(gè)屬性：oldURL 和 newURL。這兩個(gè)屬性分別保存著參數(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 對(duì)象來(lái)確定當(dāng)前的參數(shù)列表。

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

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

});

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

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

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

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

2. pageshow 和 pagehide 事件

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

第一個(gè)事件就是 pageshow，這個(gè)事件在頁(yè)面顯示時(shí)觸發(fā)，無(wú)論該頁(yè)面是否來(lái)自 bfcache。在重新加 載的頁(yè)面中，pageshow 會(huì)在 load 事件觸發(fā)后觸發(fā);而對(duì)于 bfcache中的頁(yè)面，pageshow 會(huì)在頁(yè)面狀 態(tài)完全恢復(fù)的那一刻觸發(fā)。另外要注意的是，雖然這個(gè)事件的目標(biāo)是 document，但必須將其事件處理 程序添加到 window。來(lái)看下面的例子。

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

});

})();

這個(gè)例子使用了私有作用域，以防止變量 showCount 進(jìn)入全局作用域。當(dāng)頁(yè)面首次加載完成時(shí)， showCount 的值為 0。此后，每當(dāng)觸發(fā) pageshow 事件，showCount 的值就會(huì)遞增并通過(guò)警告框顯示 出來(lái)。如果你在離開(kāi)包含以上代碼的頁(yè)面之后，又單擊“后退”按鈕返回該頁(yè)面，就會(huì)看到 showCount 每次遞增的值。這是因?yàn)樵撟兞康臓顟B(tài)，乃至整個(gè)頁(yè)面的狀態(tài)，都被保存在了內(nèi)存中，當(dāng)你返回這個(gè)頁(yè) 面時(shí)，它們的狀態(tài)得到了恢復(fù)。如果你單擊了瀏覽器的“刷新”按鈕，那么 showCount 的值就會(huì)被重 置為 0，因?yàn)轫?yè)面已經(jīng)完全重新加載了。

除了通常的屬性之外，pageshow 事件的 event 對(duì)象還包含一個(gè)名為 persisted 的布爾值屬性。 如果頁(yè)面被保存在了 bfcache中，則這個(gè)屬性的值為 true;否則，這個(gè)屬性的值為 false?？梢韵裣旅?這樣在事件處理程序中檢測(cè)這個(gè)屬性。

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

});

})();

通過(guò)檢測(cè) persisted 屬性，就可以根據(jù)頁(yè)面在 bfcache中的狀態(tài)來(lái)確定是否需要采取其他操作。 與 pageshow 事件對(duì)應(yīng)的是 pagehide 事件，該事件會(huì)在瀏覽器卸載頁(yè)面的時(shí)候觸發(fā)，而且是在 unload 事件之前觸發(fā)。與 pageshow 事件一樣，pagehide 在 document 上面觸發(fā)，但其事件處理程 序必須要添加到 window 對(duì)象。這個(gè)事件的 event 對(duì)象也包含 persisted 屬性，不過(guò)其用途稍有不同。 來(lái)看下面的例子。

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

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

});

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

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

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

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://m.iotmicrosoft.com/如轉(zhuǎn)載請(qǐng)注明出處!