js的history對象

js的history對象

window.history表示window對象的歷史記錄

1. window.history的簡單回顧

   • 歷史記錄中前進/後退，移動到指定歷史記錄點

   window.history.back(); window.history.forward();
   
   windiw.history.go(-1);//至關於back() window.history.go(1);//至關於forwar() window.history.go(0);//至關於刷新
   window.history.length;//查看歷史記錄棧中一共有多少個記錄

2. 對歷史記錄點進行修改

   Html5的新API擴展了window.history，可以作到能夠存儲/替換/監聽歷史記錄點

   • history.pushState(state, title, url)

     在history內新增一個歷史記錄，會增長後退效果，無刷新改變瀏覽器地址

     >接受三個參數：
     >state：狀態對象，記錄歷史記錄點的額外對象，可爲null
     >title：頁面標題，目前因此瀏覽器都不支持，須要的話能夠用document.title來設置
     >url：新的網址，必須同域，瀏覽器地址欄會顯示這個網址
     
     window.history.pushState(null, '', 'a.html');
     //頁面不刷新，只是改變history對象，地址欄會改變
     window.history.pushState(null, '', '#aaa');
     >//url參數帶了hash值並不會觸發hashchange事件

     url參數若是是以'?'開頭，則url的值會代替seach的值，若是是以'#'開頭，則url的值會代替hash的值，若是是以'/'開頭，則url的值會代替/後的值。

   • history.replaceState(state, title, url)

     使用姿式跟pushState同樣，區別它是修改瀏覽歷史中的當前記錄，而並不是建立一個新的，並不會增長後退效果，可是和pushState同樣都會改變當前地址欄的地址

     window.history.replaceState({a:1}, '', 'b.html')

   • history.state屬性

     返回當前頁面的state對象，想改變此對象能夠給pushState和replaceState的第一個參數傳參

     window.history.state //{a:1}

   • 監聽歷史記錄

     • hashchange：當前url的hash改變的時候會觸發該事件，ie6.7不支持。

     window.onhashchange = function(){
         console.log(location.hash)
     };//hashchange事件必須綁定再widnow對象上

     作兼容，在ie六、7下能夠用setInterval模擬

     if(('onhashchange' in window) && ((typeof document.documentMode === 'undefined') || document.documentMode == 8)) {
         //在IE8以ie7的模式運行時，window下存在onhashchange這個方法，可是永遠不會觸發這個事件
         //不能用 typeof window.onhashchange === ‘undefined’ 來檢測，由於不少支持onhashchange的瀏覽器下，其初始值就是undefined
         window.onhashchange = function() {
             console.log(window.location.hash);
         };
     } else {//不支持onhashchange用定時器判斷hash是否改變
         var location = window.location;
         var oldHash = location.hash;
         setInterval(function() {
             var newHash = location.hash;
             if(newHash === oldHash) {
                 console.log(location.hash);
             }
         })
     }

     • popstate: 當瀏覽記錄出現變化時，會觸發此事件，能夠用此來監聽urlwindow.oppopstate = function(event) { console.log(event.state); }//event.state的值是history.state的值

     調用pushState和replaceState事件不會觸發popstate事件，當點擊後退或者前進按鈕時才觸發，或者調用go()方法觸發;

     ps:頁面第一次加載時，在load事件以後，Chrome和Safari可以觸發popstate事件，而Firefox和Ie不能；

3. 簡單應用：無刷新頁面，改變url，產生歷史記錄

   不少網站都是左側爲導航欄，右側爲內容區，點擊導航欄，只刷新內容不刷新url，而且會生產瀏覽記錄能夠點擊後退前進；

   具體操做：點擊左側導航連接，阻止頁面跳轉，把地址pushState到瀏覽記錄，ajax局部刷新；點擊後退/前進時，用popstate監聽，ajax局部刷新，解決問題