Html5中hashchange、pageshow和pagehide事件怎么應用

本篇內容主要講解“Html5中hashchange、pageshow和pagehide事件怎么應用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Html5中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 后再次顯示頁面很可能就會導致頁面不正常。

到此，相信大家對“Html5中hashchange、pageshow和pagehide事件怎么應用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！