首頁 > web前端 > H5教程 > 主體

深入了解h5中history特性--pushState、replaceState

零下一度
發布: 2017-05-18 10:48:47
原創
2925 人瀏覽過

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 numberOfEntries = window.history.length;
登入後複製

注意:IE支援向go( )方法傳URL參數。

2.新增和修改history實體

Gecko2開始引入 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5引入了histt​​ory.pushState()history.replaceState()這兩個方法,他們允許新增和修改history實體。同時,這些方法會和window.onpostate事件一起運作。

#

使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest documentURL

pushState 用于向 history 添加当前页面的记录,而 replaceState pushState 的用法完全一样,唯一的区别就是它用于修改当前页面在 history 中的记录。

例子

假设http://mozilla.org/foo.html页面执行了一下JS

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),这个状态对象会包含一个stateObjcopy。这个页面看起来像foo.html+

這時,我們再次點擊後退,URL將變成http://mozilla.org/foo.htmldocument將得到另一個popstate事件和為nullstate物件。這次的返回動作並沒有改變文檔的內容。 (也許會過一會嘗試載入…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”,這兩者都會建立和啟動另一個關聯到目前documenthistory實體,但pushState()另外有一些優點:

##l 新的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實體是有pushStatereplaceState方法產生的,popstate事件的state屬性會包含一份來自history實體的state物件的拷貝

#詳見

window.onpopstate##### ####

读取当前的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 iOS 4.3
HTML4 Browsers

IE6,7,8,9
Firefox 3
Opera 10
Safari 4
Safari iOS prior to version 4.3

【相关推荐】

1. 特别推荐“php程序员工具箱”V0.1版本下载

2. js中的window.history的用法(一)

3. js中的window.history的用法(二)

4. 详细介绍h5中的history.pushState()使用实例

5. h5中History API 对Web应用的影响

以上是深入了解h5中history特性--pushState、replaceState的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板