改變 URL 不換頁

MDN官網說明

  1. HTML5 不支援IE9與以下
  2. 將更改 "瀏覽歷史紀錄"

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,直接換頁';

results matching ""

    No results matching ""