首頁  >  文章  >  web前端  >  HTML5 history新特性pushState、replaceState及兩者的差異 _html5教學技巧

HTML5 history新特性pushState、replaceState及兩者的差異 _html5教學技巧

WBOY
WBOY原創
2016-05-16 15:46:051612瀏覽

DOM中的window物件透過window.history方法提供了瀏覽器歷史記錄的讀取,讓你可以在使用者的存取記錄中前進和後退。

從HTML5開始,我們可以開始操作這個歷史記錄堆疊。

1.History

使用back(),forward(),和go()方法可以在使用者的歷史記錄中前進和後退

前進與後退

後退:


複製程式碼
複製程式碼


複製程式碼



複製程式碼

複製程式碼複製程式碼

複製程式碼


程式碼如下:


window.history.back();


這個方法會像使用者點擊了瀏覽器工具列上的回傳鍵。
相同的,也可以用以下方法產生使用者前進行為:
複製程式碼


複製程式碼


複製程式碼
複製程式碼
複製程式碼


複製程式碼



>程式碼如下:
window.history.forward(); 移動到歷史記錄中特定的位置
你可以使用go()方法從session歷史中載入特定的頁面。
向後移動一頁:




複製程式碼
複製程式碼


程式碼

window.history.go(-1);


前進一頁:





複製程式碼
程式碼如下:
window.history.go(1);

類似的,你可以前進或是後退多頁。
也可以透過檢查瀏覽器歷史記錄的length屬性來找到歷史記錄堆疊中的頁面總數。 複製程式碼程式碼如下:程式碼如下:var. .length; 注意:IE支援向go()方法傳送URL參數。 2.新增和修改history實體自Gecko2開始引進(Firefox 4 / Thunderbird 3.3 / Sea Seakey 2.1) HTML5引入了histt​​ory.pushState()和history.replaceState()這兩個方法,他們允許新增和修改history實體。同時,這些方法會和window.onpostate事件一起運作。 使用history.pushState()方法來修改referrer,這種方法可以被用在經過修改狀態後而為xmlhttpRequest物件建立的http header中。這個referrer會是建立XMLHttpRequest 時document的URL。 pushState 用於向 history 添加當前頁面的記錄,而 replaceState 和 pushState 的用法完全一樣,唯一的區別就是它用於修改當前頁面在 history 中的記錄。 範例假設http://mozilla.org/foo.html頁面執行了一下J🎜>複製程式碼程式碼如下:var stateObj = { foo: "bar" }; history.pushState(stateObj, "page 2", "bar.html ");
這種方法將會使url網址列顯示http://mozilla.org/bar.html,但瀏覽器不會載入bar.html頁面,即使這個頁面存在也不會載入。

現在再次假設使用者繼續造訪http://google.com,然後點擊後退。這時,url網址列將會,http://mozilla.org/bar.html,頁面會得到popstate事件(chrome),這個狀態物件會包含一個stateObj的copy。這個頁面看起來像foo.html。

這時,我們再次點擊後退,URL將變成http://mozilla.org/foo.html,document將得到另一個popstate事件和為null的state物件。這次的返回動作並沒有改變文檔的內容。 (也許會過一會嘗試載入…chrome)

pushState方法

pushState()有三個參數:state對象,標題(現在是忽略,未作處理),URL(可選)。具體細節:

· state對象 –state物件是一個JavaScript對象,它關係到由pushState()方法建立出來的新的history實體。用以儲存關於你所要插入到歷史 記錄的條目的相關資訊。 State物件可以是任何Json字串。因為firefox會使用使用者的硬碟來存取state對象,這個物件的最大儲存空間為640k。如果大於這個數 值,則pushState()方法會拋出一個例外。如果確實需要更多的空間來存儲,請使用本地存儲。

· title—firefox現在回忽略這個參數,雖然它可能將來會被使用上。而現在最安全的使用方式是傳一個空字串,以防止將來的修改。或者可以傳一個簡短的標題來表示state

· URL—這個參數用來傳遞新的history實體的URL,注意瀏覽器將不會在呼叫pushState()方法後載入這個URL。但也許會過一會嘗試載入這個URL。例如在用戶重啟了瀏覽器後,新的url可以不是絕對路徑。如果是相對路徑,那麼它會相對於現有的url。新的url必須和現有的url同域,否則pushState()將拋出異常。這個參數是選填的,如果為空,則會被置為document目前的url。

某種意義上來說,呼叫pushState()方法很像設定了window.location = “#foo”,這兩者都會建立和啟動另一個關聯到目前document的history實體,但pushState( ) 另外有一些優點:

新的url可以是任何和當前url同域的url,相比之下,如果只設定hash,window.location會保持在同一個document。

如果不需要,你可以不修改url。比較而言,設定window.location = “#foo”;只產生新的history實體,如果你目前的hash不是#foo

你可以將任意的資料與你的新history實體關聯。使用基於hash的方法,需要將所有相關的資料編碼為一個短字串。

注意,pushState()方法不會使hashchange時間發生,即使是新舊url只是hash不同。

replaceState()方法

history.replaceState() 用起來很像pushState(),除了replaceState()是用來修改當前的history實體而不是建立一個新的。這個方法有時會很有用,當 你需要對某些使用者行為作反應而更新一個state物件或當前history實體時,可以使用它來更新state物件或當前history實體的url。

popstate事件

當history實體改變時,popstate事件將會發生。如果history實體是有pushState和replaceState方法產生的,popstate事件的state屬性會包含一份來自history實體的state物件的拷貝

詳見window.onpopstate

讀取目前的state

讀取現有state

當頁面載入時,它可能會有一個非空的state物件。這可能發生在當頁面設定一個state物件(使用pushState或replaceState)之後使用者重啟了瀏覽器。當頁面重新加載,頁面將收到onload事件,但不會有popstate事件。然而,如果你讀取history.state屬性,將在popstate事件發生後得到這個state物件
var currentState = history.state;
Browsers: Tested and Working In

HTML5 Browsers

Chrome 8,9,10
Firefox 4
Safari 5
Opera 11
Safari 🎜. >
IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3


history.pushState(state, title, url) --------------------- -------------------------------------------------- ---------

將目前URL和history.state加入history中,並用新的state和URL取代目前。不會造成頁面刷新。

state:與要跳到的URL對應的狀態資訊。

title: No need to pass

url: URL address to jump to, cannot cross domain.

history.replaceState(state, title, url)

-------------------------- -------------------------------------------------- --

Replace the current state and URL with the new one. It will not cause the page to refresh.

state: State information corresponding to the URL to be jumped to.

title: Can not be passed

url: URL address to jump to, cannot cross domain.

-------------------------------------------------- ------------------------------------

There seems to be no difference between the two, but in fact The big difference is that pushState adds history records, while replaceState does not.
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn