javascript History對象詳解

標籤：重複執行   ted   性問題   asc   瀏覽曆史   page   最新   設定   false   

length

　　history.length屬性儲存著記錄的URL數量。初始時，該值為1。由於IE10+瀏覽器在初始時返回2，存在相容性問題，所以該值並不常用

跳轉方法

　　go()、back()和forward()

　　如果移動的位置超出了訪問曆史的邊界，以上三個方法並不報錯，而是靜默失敗

　　[注意]使用記錄時，頁面通常從瀏覽器緩衝之中載入，而不是重新要求伺服器發送新的網頁。不觸發onload

增改記錄

　　HTML5為history對象添加了兩個新方法，history.pushState()和history.replaceState()，用來在瀏覽曆史中添加和修改記錄。state屬性用來儲存記錄對象，而popstate事件用來監聽history對象的變化

　　[注意]ie9不支援

　【pushState()】

　　　　history.pushState()方法向瀏覽器曆史添加了一個狀態。pushState()方法帶有三個參數：一個狀態物件、一個標題(現在被忽略了)以及一個可選的URL地址

　　　　history.pushState(state, title, url);

　　　　state object —— 狀態物件是一個由pushState()方法建立的、與曆史紀錄相關的javascript對象。當使用者定向到一個新的狀態時，會觸發popstate事件。事件的state屬性包含了曆史紀錄的state對象。如果不需要這個對象，此處可以填null

　　　　title —— 新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這裡可以填null

　　　　URL —— 這個參數提供了新歷史紀錄的地址。新URL必須和當前URL在同一個域，否則，pushState()將丟出異常。這個參數可選，如果它沒有被特別標註，會被設定為文檔的當前URL

　　　　假定當前網址是example.com/1.html，使用pushState方法在瀏覽記錄(history對象)中添加一個新記錄

var stateObj = { foo: ‘bar‘ };history.pushState(stateObj, ‘page 2‘, ‘2.html‘);

　　　　添加上面這個新記錄後，瀏覽器地址欄立刻顯示example.com/2.html，但並不會跳轉到2.html，甚至也不會檢查2.html是否存在，它只是成為瀏覽曆史中的最新記錄。假如這時訪問了google.com，然後點擊了倒退按鈕，頁面的url將顯示2.html，但是內容還是原來的1.html。再點擊一次倒退按鈕，url將顯示1.html，內容不變

　　　　總之，pushState方法不會觸發頁面重新整理，只是導致history對象發生變化，地址欄的顯示地址發生變化

　　　　如果pushState的url參數，設定了一個新的錨點值(即hash)，並不會觸發hashchange事件，，即使新的URL和舊的只在hash上有區別

　　　　如果設定了一個跨域網址，則會報錯。這樣設計的目的是，防止惡意代碼讓使用者以為他們是在另一個網站上

　　【replaceState()】

　　history.replaceState方法的參數與pushState方法一模一樣，不同之處在於replaceState()方法會修改當前記錄條目而並非建立新的條目

　　假定當前網頁是example.com/example.html

history.pushState({page: 1}, ‘title 1‘, ‘?page=1‘);history.pushState({page: 2}, ‘title 2‘, ‘?page=2‘);history.replaceState({page: 3}, ‘title 3‘, ‘?page=3‘);history.back()// url顯示為http://example.com/example.html?page=1history.back()// url顯示為http://example.com/example.htmlhistory.go(2)// url顯示為http://example.com/example.html?page=3

 

　　【state】

　　history.state屬性返回當前頁面的state對象

history.pushState({page: 1}, ‘title 1‘, ‘?page=1‘);history.state// { page: 1 }

 

　　【popstate事件】

　　每當同一個文檔的瀏覽曆史(即history對象)出現變化時，就會觸發popstate事件

　　[注意]需要注意的是，僅僅調用pushState方法或replaceState方法，並不會觸發該事件，只有使用者點擊瀏覽器倒退按鈕和前進按鈕，或者使用javascript調用back()、forward()、go()方法時才會觸發。另外，該事件只針對同一個文檔，如果瀏覽曆史的切換，導致載入不同的文檔，該事件也不會觸發

　　使用的時候，可以為popstate事件指定回呼函數。這個回呼函數的參數是一個event事件對象，它的state屬性指向pushState和replaceState方法為當前URL所提供的狀態物件(即這兩個方法的第一個參數)

window.onpopstate = function (event) { console.log(‘location: ‘ + document.location); console.log(‘state: ‘ + JSON.stringify(event.state));};　　

　　上面代碼中的event.state，就是通過pushState和replaceState方法，為當前URL綁定的state對象

　　這個state對象也可以直接通過history對象讀取

　　var currentState = history.state;

往返緩衝

　　預設情況下，瀏覽器會在當前會話(session)快取頁面面，當使用者點擊“前進”或[上一頁] 按鈕時，瀏覽器就會從緩衝中載入頁面

　　瀏覽器有一個特性叫“往返緩衝”(back-forward cache或bfcache)，可以在使用者使用瀏覽器的“後退”和“前進”按鈕時加快頁面的轉換速度。這個緩衝中不僅儲存著頁面資料，還儲存了DOM和javascript的狀態；實際上是將整個頁面都儲存在了記憶體裡。如果頁面位於bfcache中，那麼再次開啟該頁面時就不會觸發load事件

　　[注意]IE10-瀏覽器不支援

　　【pageshow】

　　pageshow事件在頁面載入時觸發，包括第一次載入和從緩衝載入兩種情況。如果要指定頁面每次載入(不管是不是從瀏覽器緩衝)時都啟動並執行代碼，可以放在這個事件的監聽函數

　　第一次載入時，它的觸發順序排在load事件後面。從緩衝載入時，load事件不會觸發，因為網頁在緩衝中的樣子通常是load事件的監聽函數運行後的樣子，所以不必重複執行。同理，如果是從緩衝中載入頁面，網頁內初始化的JavaScript指令碼(比如DOMContentLoaded事件的監聽函數)也不會執行

　　[注意]雖然這個事件的目標是document，但必須將其事件處理常式添加到window

　　pageshow事件有一個persisted屬性，返回一個布爾值。頁面第一次載入時或沒有從緩衝載入時，這個屬性是false；當頁面從緩衝載入時，這個屬性是true

(function(){ var showCount = 0; window.onload = function(){  console.log(‘loaded‘); } window.onpageshow = function(e){  e = e || event;  showCount ++;  console.log(e.persisted,showCount + ‘times‘); }})();

　　[注意]上面的例子使用了私人範圍，以防止變數showCount進入全域範圍。如果單擊了瀏覽器的[重新整理] 按鈕，那麼showCount的值就會被重設為0，因為頁面已經完全重新載入了

　　【pagehide】

　　與pageshow事件對應的是pagehide事件，該事件會在瀏覽器卸載頁面的時候觸發，而且是在unload事件之前觸發。與pageshow事件一樣，pagehide在document上面觸發，但其事件處理常式必須要添加到window對象

　　[注意]指定了onunload事件處理常式的頁面會被自動排除在bfcache之外，即使事件處理常式是空的。原因在於，onunload最常用於撤銷在onload中所執行的操作，而跳過onload後再次顯示頁面很可能就會導致頁面不正常

　　pagehide事件的event對象也包含persisted屬性，不過其用途稍有不同。如果頁面是從bfcache中載入的，那麼persisted的值就是true；如果頁面在卸載之後會被儲存在bfcache中，那麼persisted的值也會被設定為true。因此，當第一次觸發pageshow時，persisted的值一定是false，而在第一次觸發pagehide時，persisted就會變成true(除非頁面不會被儲存在bfcache中)

window.onpagehide = function(e){ e = e || event; console.log(e.persisted);}

使用方法：

1、取消預設的返回操作

function pushHistory(){  var state = {       title: "title",       url: "#"         }  window.history.pushState(state, "title", "#");   }pushHistory()

2、history.js用於相容html4，也可以監聽pushState與replaceSate

javascript History對象詳解