改變 URL 不換頁
- HTML5 不支援IE9與以下
- 將更改 "瀏覽歷史紀錄"
history.pushState(state,title,url);
state // 設置該筆瀏覽歷程記錄所儲存的狀態物件 可為null
title // 設置該筆瀏覽頁面的title,部分瀏覽器不支援 可為null
url // 新的 URL 不一定需要為一個絕對的路徑;如果是相對路徑,會依據目前的URL來解析。
// 新的 URL 需要與目前 URL 的 origin 是一樣的; 否則,pushState() 會丟出一個錯誤的例外。
// 這個參數是選擇性的; 如果沒有被指定的話,他會設定為目前文件的 URL。 可為null
// 範例
<a href="#" onclick="history.pushState(state,title,'/click/me.html');" >點我</a>
// 使用方式同上
history.replaceState();
// 取得 state // 現在瀏覽歷程記錄所儲存的狀態物件
var currentState = history.state;
// 其他相關
在呼叫
history.pushState()
history.replaceState()
history.back() // 回上頁
history.forward() // 回下頁
時都會被觸發。
pushState()與replaceState()差異
pushState
回上一頁 會回到原始網址。
replaceState
回上一頁 會回到原始網址的上一頁(因為原本網址的紀錄已被取代)。
pjax = ajax + pushstate
hash 與 href
location.hash = '更改#標籤後方字串';
// 範例
location.hash = 'd789';
// 將移動到 id 為 d789 的位置
location.href = '直接更改頁面URL,直接換頁';