caoporm97国产在线视频|欧美性XXXXX精品|一本一道久久a久久精品综合开|精品久久久久久久久久久AⅤ|

十年專注于品牌網(wǎng)站建設 十余年專注于網(wǎng)站建設_小程序開發(fā)_APP開發(fā),低調、敢創(chuàng)新、有情懷!
南昌百恒網(wǎng)絡微信公眾號 掃一掃關注
小程序
tel-icon全國服務熱線:400-680-9298,0791-88117053
掃一掃關注百恒網(wǎng)絡微信公眾號
掃一掃打開百恒網(wǎng)絡微信小程序

百恒網(wǎng)絡

南昌百恒網(wǎng)絡

結合實例介紹Html5中hashchange事件、pageshow事件和pagehide事件應用方法及技巧

百恒網(wǎng)絡 2017-01-03 7180

在移動端做單頁切換時,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://m.gimmickmag.com/如轉載請注明出處!


400-680-9298,0791-88117053
掃一掃關注百恒網(wǎng)絡微信公眾號
掃一掃打開百恒網(wǎng)絡小程序

歡迎您的光顧,我們將竭誠為您服務×

售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售后服務 售后服務
 
售后服務 售后服務
 
備案專線 備案專線
 
×