window.history

做者:zccst 





舊版: 
forword() 
backword() 
go(number) 


HTML5中新增了 
onhashchange  瀏覽器兼容性較好,用得較多 
pushState / replaceState / onpopState 



1、onhashchange 
hashchange事件在當前頁面URL中的hash值發生改變時觸發 (查看location.hash). 

區別: 
經過window.onpopstate來監聽url的變化,但會忽略URL的hash部分。 

結論:二者偏偏互補,各有分工。 


javascript

Js代碼   收藏代碼
  1. if ("onhashchange" in window) {  
  2.     alert("該瀏覽器支持hashchange事件!");  
  3. }  
  4.   
  5. function locationHashChanged() {  
  6.     if (location.hash === "#somecoolfeature") {  
  7.         somecoolfeature();  
  8.     }  
  9. }  
  10.   
  11. window.onhashchange = locationHashChanged;  



hashchange 事件對象有下面兩個屬性 
newURL DOMString 當前頁面新的URL 
oldURL DOMString 當前頁面舊的URL 




2、pushState / replaceState / onpopState 


(通俗易懂版) 
HTML5的新API擴展了window.history,使歷史記錄點更加開放了。能夠存儲當前歷史記錄點、替換當前歷史記錄點、監聽歷史記錄點,下面逐一簡要說明一下。 

一、存儲當前歷史記錄點 

存儲的方式相似於數組的入棧(Array.push()),在window.history裏新增一個歷史記錄點,例如: 

// 當前的url爲:http://qianduanblog.com/index.html 
var json={time:new Date().getTime()}; 
// @狀態對象:記錄歷史記錄點的額外對象,能夠爲空 
// @頁面標題:目前全部瀏覽器都不支持 
// @可選的url:瀏覽器不會檢查url是否存在,只改變url,url必須同域,不能跨域 
window.history.pushState(json,"","http://qianduanblog.com/post-1.html"); 
執行了pushState方法後,頁面的url地址爲http://qianduanblog.com/post-1.html。 

二、替換當前歷史記錄點 

window.history.replaceState和window.history.pushState相似,不一樣之處在於replaceState不會在window.history裏新增歷史記錄點,其效果相似於window.location.replace(url),都是不會在歷史記錄點裏新增一個記錄點的。當你爲了響應用戶的某些操做,而要更新當前歷史記錄條目的狀態對象或URL時,使用replaceState()方法會特別合適。 

三、監聽歷史記錄點 

監聽歷史記錄點,直觀的可認爲是監聽URL的變化,但會忽略URL的hash部分,監聽URL的hash部分,HTML5有新的API爲onhashchange,個人博客裏也有說到該方法和跨瀏覽器的兼容解決方案。能夠經過window.onpopstate來監聽url的變化,而且能夠獲取存儲在該歷史記錄點的狀態對象,也就是上文說到的json對象,如: 

// 當前的url爲:http://qianduanblog.com/post-1.html 
window.onpopstate=function() 

// 得到存儲在該歷史記錄點的json對象 
var json=window.history.state; 
// 點擊一次回退到:http://qianduanblog.com/index.html 
// 得到的json爲null 
// 再點擊一次前進到:http://qianduanblog.com/post-1.html 
// 得到json爲{time:1369647895656} 

值得注意的是:javascript腳本執行window.history.pushState和window.history.replaceState不會觸發onpopstate事件。 









(文縐縐版) 
HTML5引進了history.pushState()方法和history.replaceState()方法,它們容許你逐條地添加和修改歷史記錄條目。這些方法能夠協同window.onpopstate事件一塊兒工做。 


1,pushState() 
某種意義上,調用pushState()有點相似於設置window.location='#foo',它們都會在當前文檔內建立和激活新的歷史記錄條目。但pushState()有本身的優點: 

新的URL能夠是任意的同源URL,與此相反,使用window.location方法時,只有僅修改 hash 才能保證停留在相同的document中。 
根據我的須要來決定是否修改URL。相反,設置window.location='#foo',只有在當前hash值不是foo時才建立一條新歷史記錄。 
你能夠在新的歷史記錄條目中添加抽象數據。若是使用基於hash的方法,你只能把相關數據轉碼成一個很短的字符串。 
注意pushState()方法永遠不會觸發hashchange事件,即使新的地址只變動了hash。 


2,replaceState()方法 
history.replaceState()操做相似於history.pushState(),不一樣之處在於replaceState()方法會修改當前歷史記錄條目而並不是建立新的條目。 

當你爲了響應用戶的某些操做,而要更新當前歷史記錄條目的狀態對象或URL時,使用replaceState()方法會特別合適。 

3,popstate事件 

每當激活的歷史記錄發生變化時,都會觸發popstate事件。若是被激活的歷史記錄條目是由pushState所建立,或是被replaceState方法影響到的,popstate事件的狀態屬性將包含歷史記錄的狀態對象的一個拷貝。 


舉例: 
history.pushState 
菊花插一刀之意,用法舉例: 
history.pushState({}, "頁面標題", "xxx.html"); 
history.pushStatehistory.replaceState 
換把菊花刀之意,用法舉例: 
history.replaceState(null, "頁面標題", "xxx.html"); 
window.onpopstate 
在菊花刀拔插的時候……,用法舉例: 
window.addEventListener("popstate", function() { 
    var currentState = history.state; 
    /* 
     * 該幹嗎幹嗎 
    */
}); 

完整實例: 
http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/ 

策略以下: 
每次手動點擊左側的菜單,我將Ajax地址的查詢內容(?後面的)附在demo HTML頁面地址後面,使用history.pushState塞到瀏覽器歷史中。 
瀏覽器的前進與後退,會觸發window.onpopstate事件,經過綁定popstate事件,就能夠根據當前URL地址中的查詢內容讓對應的菜單執行Ajax載入,實現Ajax的前進與後退效果。 
頁面首次載入的時候,若是沒有查詢地址、或查詢地址不匹配,則使用第一個菜單的Ajax地址的查詢內容,並使用history.replaceState更改當前的瀏覽器歷史,而後觸發Ajax操做。 html

相關文章
相關標籤/搜索