為什么80%的碼農都做不了架構師？>>> ??

HTML5 新增的歷史記錄 API 可以實現無刷新更改地址欄鏈接，配合 AJAX 可以做到無刷新跳轉。

簡單來說：假設當前頁面為renfei.org/，那么執行下面的 JavaScript 語句：

window.history.pushState(null,?null,?"/profile/");

之后，地址欄的地址就會變成renfei.org/profile/，但同時瀏覽器不會刷新頁面，甚至不會檢測目標頁面是否存在。

pushState 方法

上面的語句實際上用到了 HTML5 的歷史記錄 API。這套 API 提供一種「人為操縱」瀏覽器歷史記錄的方法。

瀏覽器歷史記錄可以看作一個「棧」。棧是一種后進先出的結構，可以把它想象成一摞盤子，用戶每點開一個新網頁，都會在上面加一個新盤子，叫「入棧」。用戶每次點擊「后退」按鈕都會取走最上面的那個盤子，叫做「出棧」。而每次瀏覽器顯示的自然是最頂端的盤子的內容。

執行pushState函數之后，會往瀏覽器的歷史記錄中添加一條新記錄，同時改變地址欄的地址內容。它可以接收三個參數，按順序分別為：

一個對象或者字符串，用于描述新記錄的一些特性。這個參數會被一并添加到歷史記錄中，以供以后使用。這個參數是開發者根據自己的需要自由給出的。

一個字符串，代表新頁面的標題。當前基本上所有瀏覽器都會忽略這個參數。

一個字符串，代表新頁面的相對地址。

例如，我們可以這樣寫：

var?state?=?{id:?2,name:?"profile" }; window.history.pushState(state,?"My?Profile",?"/profile/");

popstate 事件

當用戶點擊瀏覽器的「前進」、「后退」按鈕時，就會觸發popstate事件。你可以監聽這一事件，從而作出反應。

window.addEventListener("popstate",?function(e)?{var?state?=?e.state;?????//?do?something...? });

這里e.state就是當初pushState時傳入的第一個參數。例如，在我們的例子中，有：

e.state.id?==?2; e.state.name?==?"profile";

replaceState 方法

有時，你希望不添加一個新記錄，而是替換當前的記錄（比如對網站的 landing page），則可以使用replaceState方法。這個方法和pushState的參數完全一樣。

應用：全站 AJAX，并使瀏覽器能夠抓取 AJAX 頁面

這個可以干啥用？一個比較常用的場景就是，配合 AJAX。

假設一個頁面左側是若干導航鏈接，右側是內容，同時導航時只有右側的內容需要更新，那么刷新整個頁面無疑是浪費的。這時我們可以使用 AJAX 來拉取右面的數據。但是如果僅僅這樣，地址欄是不會改變的，用戶無法前進、后退，也無法收藏當前頁面或者把當前頁面分享給他人；搜索引擎抓取也有困難。這時，就可以使用 HTML5 的 History API 來解決這個問題。

思路：首先綁定click事件。當用戶點擊一個鏈接時，通過preventDefault函數防止默認的行為（頁面跳轉），同時讀取鏈接的地址（如果有 jQuery，可以寫成$(this).attr('href')），把這個地址通過pushState塞入瀏覽器歷史記錄中，再利用 AJAX 技術拉取（如果有 jQuery，可以使用$.get方法）這個地址中真正的內容，同時替換當前網頁的內容。

為了處理用戶前進、后退，我們監聽popstate事件。當用戶點擊前進或后退按鈕時，瀏覽器地址自動被轉換成相應的地址，同時popstate事件發生。在事件處理函數中，我們根據當前的地址抓取相應的內容，然后利用 AJAX 拉取這個地址的真正內容，呈現，即可。

最后，整個過程是不會改變頁面標題的，可以通過直接對document.title賦值來更改頁面標題。

其他說明

URL 的限制

為了安全考慮，新 URL 必須和當前 URL 在同一個域名下。例如，你不能把地址改成 Google 的首頁。否則不懷好心的人就可以把地址改成網銀等關鍵網站的地址，來迷惑用戶了。

但是，URL 允許使用 query string 的形式。例如：

window.history.pushState(null,?null,?"?id=1");

在某些情況下可能比較方便。

瀏覽器兼容性

根據?MDN 提供的信息，IE 10, Chrome 5, Firefox 4, Safari 5 開始支持這個特性。Fallback 可以采用替換 hash 的方法。另外，History.js?庫也提供了對老版本瀏覽器的 history API 支持（同樣是利用替換 hash）。為了搜索引擎收錄，可能需要使用#!表示法。

轉載于:https://my.oschina.net/hicms/blog/548488

總結

以上是生活随笔為你收集整理的HTML5无刷新修改URL：利用 History API 无刷新更改地址栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。