有趣的API： history pushState/popstate 無刷新跳轉

摸魚逛知乎看到這麼一個問題

這個API看起來貌似很厲害的樣子，搜搜看

不得不說，張鑫旭真的厲害。

API介紹

首先看看API如何使用：

• history.pushState(state, title, url) : 無刷新的向瀏覽器 歷史最前方 加入一條記錄。

  • state(any) 須要保存的數據，這個數據在觸發popstate事件時保存在event.state上。

  • title(string)：

  Firefox 目前忽略了這個參數，雖然他以後有可能會採用。若是以後改變了這個做法，傳送空白的字串應該還會是安全的。另外，你能夠傳送一個短的標題來敘述你想要到的state。
  目前沒有發現有地方保存這個title，推測是state的說明？

  • url(string) 須要更改的url地址。

  • ps：pushState 須要至少兩個參數。

• popstate： 瀏覽器點擊前進後退時觸發的事件。event.state能夠獲取當前url下設置的state。

另外獲取pushState中設置的state不必定要在popstate事件中獲取，直接history.state也能夠拿到。

補充內容

pjax

pjax,利用ajax 和 pushState作成的和多頁應用體驗一致的SPA。github項目地址

現代路由框架的H5模式。

路由器的無刷新跳轉也是利用該api完成的。另外，因爲url變化，在用戶複製分享時候因爲路由未定義會出錯，因此還須要服務端進行重定向處理。

引用資料：

1. 張鑫旭：ajax與HTML5 history pushState/replaceState實例

2. mdn文檔