HTML5實現無刷新修改URL

前言

今天在作一個vue的搜索功能，須要從搜索結果頁面跳轉到細節頁面，而後點擊返回還能返回到剛剛的結果頁面，若是隻用window.history.go(-1)固然會從新刷新搜索頁面，固然是不行的。

我嘗試了倆種方式來修改url:

1. window.location.href,拼接一個搜索的key值，點擊搜索的同時，刷新了頁面，url改變了，功能是實現了，但是bug來了...，搜索頁面閃爍後才進入結果頁，而結合不跳轉頁面就不會發生閃爍的狀況，因此當頁面刷新時，vue實例都會被從新加載。
2. window.location.hash,url中#爲網頁中的一個位置，當讀取此url時，頁面會自動滾動到錨點處。這種方法不會向服務器發送請求，也不會重載頁面。可讀寫。讀取時，能夠用來判斷網頁狀態是否改變；寫入時，則會在不重載網頁的前提下，創造一條訪問歷史記錄。

新增API

百度後發現HTML5爲window.history對象引入了兩個新的api是history.pushState() 和 history.replaceState()方法，它們分別能夠添加和修改歷史記錄條目。這些方法一般與window.onpopstate事件配合使用。兩種api都能改變當前的url，不一樣的是，pushState在瀏覽器中建立一條新的歷史記錄，而history.replaceState僅僅替換當前地址爲指定url。

HTML5 新增的歷史記錄 API 都可以實現無刷新更改地址欄連接，配合 AJAX 徹底能夠作到無刷新跳轉。他們的做用很是大，能夠作到改變網址卻不須要刷新頁面，這個特性後來用到了單頁面應用中好比：vue-router，react-router-dom裏面。那麼下面介紹新API的使用方法

pushState方法

上面提到的這套 API 提供一種「人爲操縱」瀏覽器歷史記錄的方法。

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

語法:window.history.pushState(state, title, url);

執行pushState函數以後，會往瀏覽器的歷史記錄中建立一條新記錄，同時改變地址欄的地址內容。它能夠接收三個參數，按語法順序分別爲：

1. 一個state對象或者字符串，用於描述新記錄的一些特性。這個參數會被一併添加到歷史記錄中，以供之後使用。這個參數是開發者根據本身的須要自由給出的。該值是後期能夠經過history.state;獲取當前頁面的參數,
2. 一個字符串，表明新頁面的標題。當前基本上全部瀏覽器都會忽略這個參數。
3. 一個字符串，表明新頁面的相對地址。（必須與當前頁面處在同一個域。）

簡單例子：假設當前頁面爲renfei.org/，打開控制檯執行下面的 JavaScript 語句：

window.history.pushState({id: 1,name: "profile1"}, "My Profile", "/profile/");  //第一二參數可忽略設置爲null

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

replaceState方法

有時，你但願不添加一個新記錄，而是替換當前的記錄，倆者區別在於 replaceState() 是修改了當前的歷史記錄項而不是新建一個。

replaceState和pushState原理同樣使用也同樣,最經常使用的方法：

window.history.replaceState({id: 1,name: "profile"},'下載','download?id=1');

特色：replaceState不會加入到歷史記錄裏面,用history.go(-1)會跳過當前頁面至關因而history.go(-2)。

popstate事件

當頁面加載時，它可能會有一個非空的state對象。這可能發生在當頁面設置一個state對象(使用pushState或者replaceState)以後用戶重啓了瀏覽器。當頁面從新加載，頁面將收到onload事件，但不會有popstate事件。然而，若是你讀取history.state屬性，將在popstate事件發生後獲得這個state對象

var currentState = history.state; //獲得當前頁面設置的history.pushState的state對象參數值

調用 history.pushState() 或者 history.replaceState() 不會觸發 popstate 事件。 popstate事件只會在瀏覽器某些行爲下觸發， 好比點擊後退、前進按鈕(或者在JavaScript中調用history.back()、history.forward()、history.go()方法)。

例子：假設當前頁面地址是http://example.com/index.html

window.onpopstate = function(event) {
  alert("location: " + document.location.href + ", state: " + JSON.stringify(event.state));//拿到history.state對象值
};
//綁定事件處理函數. 
history.pushState({page: 1}, "title 1", "?page=100");    //添加並激活一個歷史記錄條目 http://example.com/index.html?page=100,條目索引爲1    //history.state爲{page: 1}
history.pushState({page: 2}, "title 2", "?page=200");    //添加並激活一個歷史記錄條目 http://example.com/index.html?page=200,條目索引爲2
history.replaceState({page: 3}, "title 3", "?page=300"); //修改當前所在頁面激活的歷史記錄條目 http://ex..?page=200 變爲 http://ex..?page=300,條目索引爲3

history.back(); // 彈出 "location: http://example.com/index.html?page=100, state: {"page":1}"
history.back(); // 彈出 "location: http://example.com/index.html, state: null
history.go(2);  // 彈出 "location: http://example.com/index.html?page=300, state: {"page":3}

pushState方法與設置hash值的區別

在某種意義上，調用 pushState() 與 設置 window.location = "#foo" 相似，兩者都會在當前頁面建立並激活新的歷史記錄。但 pushState() 具備以下幾條優勢：

1. 新的 URL 能夠是與當前URL同源的任意URL 。而設置 window.location 僅當你只修改了哈希值時才保持同一個文件。
2. 若是須要，能夠沒必要改變URL就能建立一條歷史記錄。而設置 window.location.hash = "#foo";只有在當前哈希不是 #foo 的狀況下， 纔會建立一個新的歷史記錄項。
3. 咱們能夠爲新的歷史記錄項關聯任意數據。而基於哈希值的方式，則必須將全部相關數據編碼到一個短字符串裏。

須要注意的是經過history.pushState修改網頁的URL地址，在配合相關代碼顯示隱藏相應界面即可以實現單頁面多界面相互操做。該方法比直接訪問URL地址速度快，執行效率高，UI體驗好，但會增長頁面的複雜性及耦合性，要視實際狀況而定，通常都用在dialog彈出框上。

應用：全站 AJAX，並使瀏覽器可以抓取 AJAX 頁面

這個能夠幹啥用？一個比較經常使用的場景就是，配合 AJAX。

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

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

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

最後，整個過程是不會改變頁面標題的，能夠經過直接對document.title賦值來更改頁面標題。