---

以往在 AJAX 設計的網頁，換頁時只能用 location.href = 'xxx'

在網址上用 #xxx 來記錄目前的頁面

不過現在在支援 HTML5 的瀏覽器，也可以直接修改網址了


可以用 if(history.pushState) 來檢查瀏覽器是否支援

用 history.pushState({},'title','new_href.php');

就可以將網址的路徑改為 new_href.php

可以用相對位址也可以用絕對位址，但 domain name 無法修改

第一個參數目前沒什麼用，空著就好

第二個是新頁面的 title 名稱，但在 chrome 沒有作用

要再加個 document.title = 'title'; 來修改才行


用 pushState 改了網址之後，按瀏覽器的上一頁就會變回本來的網址

可以用 popstate 事件來偵測使用者是否按了上一頁或下一頁的按鈕

用 jQuery 的方法為

$(window).on('popstate',function(e){
    //prevent popstate when page load
    if(e.originalEvent.state === null){ return; }
   
    //load ajax page
});


注意用 popstate 回上一頁時不要再執行到 pushState


在 iOS 上一開始載入網頁時會觸發一次 popstate
所以要檢查一下 e.originalEvent.state 來排除


參考:

 


--
※ 作者: Knuckles 時間: 2014-09-29 03:50:11
※ 編輯: Knuckles 時間: 2015-03-08 15:34:59

Knuckles: [JS] History API 用 pushState 修改網址 - KnucklesNote板