在HTML5實(shí)現(xiàn)無刷新修改URL的方法總結(jié)！

經(jīng)過之前的各種效果的分享和實(shí)現(xiàn)方法的分享想必大家都已經(jīng)學(xué)會(huì)了，那么今天來分享干貨中的上等補(bǔ)品有關(guān)于“在HTML5實(shí)現(xiàn)無刷新修改URL的方法總結(jié)！”這方面的內(nèi)容，希望大家有所用途！

前言

今天在做一個(gè)vue的搜索功能，需要從搜索結(jié)果頁面跳轉(zhuǎn)到細(xì)節(jié)頁面，然后點(diǎn)擊返回還能返回到剛剛的結(jié)果頁面，如果只用window.history.go(-1)當(dāng)然會(huì)重新刷新搜索頁面，當(dāng)然是不行的。

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

• window.location.href,拼接一個(gè)搜索的key值，點(diǎn)擊搜索的同時(shí)，刷新了頁面，url改變了，功能是實(shí)現(xiàn)了，可是bug來了...，搜索頁面閃爍后才進(jìn)入結(jié)果頁，而結(jié)合不跳轉(zhuǎn)頁面就不會(huì)發(fā)生閃爍的情況，所以當(dāng)頁面刷新時(shí)，vue實(shí)例都會(huì)被重新加載。
• window.location.hash,url中#為網(wǎng)頁中的一個(gè)位置，當(dāng)讀取此url時(shí)，頁面會(huì)自動(dòng)滾動(dòng)到錨點(diǎn)處。這種方法不會(huì)向服務(wù)器發(fā)送請(qǐng)求，也不會(huì)重載頁面?？勺x寫。讀取時(shí)，可以用來判斷網(wǎng)頁狀態(tài)是否改變；寫入時(shí)，則會(huì)在不重載網(wǎng)頁的前提下，創(chuàng)造一條訪問歷史記錄。

新增API

百度后發(fā)現(xiàn)HTML5為window.history對(duì)象引入了兩個(gè)新的api是history.pushState() 和 history.replaceState()方法，它們分別可以添加和修改歷史記錄條目。這些方法通常與window.onpopstate事件配合使用。兩種api都能改變當(dāng)前的url，不同的是，pushState在瀏覽器中創(chuàng)建一條新的歷史記錄，而history.replaceState僅僅替換當(dāng)前地址為指定url。

HTML5 新增的歷史記錄 API 均可以實(shí)現(xiàn)無刷新更改地址欄鏈接，配合 AJAX 完全可以做到無刷新跳轉(zhuǎn)。他們的作用非常大，可以做到改變網(wǎng)址卻不需要刷新頁面，這個(gè)特性后來用到了單頁面應(yīng)用中比如：vue-router，react-router-dom里面。那么下面介紹新API的使用方法

pushState方法

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

我們可以將瀏覽器歷史記錄可以看作一個(gè)「?！埂Ｊ且环N后進(jìn)先出的結(jié)構(gòu)，可以把它想象成一摞盤子，用戶每點(diǎn)開一個(gè)新網(wǎng)頁，都會(huì)在上面加一個(gè)新盤子，叫「入?！?。用戶每次點(diǎn)擊「后退」按鈕都會(huì)取走最上面的那個(gè)盤子，叫做「出?！埂６看螢g覽器顯示的自然是最頂端的盤子的內(nèi)容。

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

執(zhí)行pushState函數(shù)之后，會(huì)往瀏覽器的歷史記錄中創(chuàng)建一條新記錄，同時(shí)改變地址欄的地址內(nèi)容。它可以接收三個(gè)參數(shù)，按語法順序分別為：

• 一個(gè)state對(duì)象或者字符串，用于描述新記錄的一些特性。這個(gè)參數(shù)會(huì)被一并添加到歷史記錄中，以供以后使用。這個(gè)參數(shù)是開發(fā)者根據(jù)自己的需要自由給出的。該值是后期可以通過history.state;獲取當(dāng)前頁面的參數(shù),
• 一個(gè)字符串，代表新頁面的標(biāo)題。當(dāng)前基本上所有瀏覽器都會(huì)忽略這個(gè)參數(shù)。
• 一個(gè)字符串，代表新頁面的相對(duì)地址。（必須與當(dāng)前頁面處在同一個(gè)域。）

簡單例子：假設(shè)當(dāng)前頁面為renfei.org/，打開控制臺(tái)執(zhí)行下面的 JavaScript 語句：

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

之后，地址欄的地址就會(huì)變成renfei.org/profile/，但同時(shí)瀏覽器不會(huì)刷新頁面，甚至不會(huì)檢測(cè)目標(biāo)頁面是否存在。

replaceState方法

有時(shí)，你希望不添加一個(gè)新記錄，而是替換當(dāng)前的記錄，倆者區(qū)別在于 replaceState() 是修改了當(dāng)前的歷史記錄項(xiàng)而不是新建一個(gè)。

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

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

特點(diǎn)：replaceState不會(huì)加入到歷史記錄里面,用history.go(-1)會(huì)跳過當(dāng)前頁面相當(dāng)于是history.go(-2)。

popstate事件

當(dāng)頁面加載時(shí)，它可能會(huì)有一個(gè)非空的state對(duì)象。這可能發(fā)生在當(dāng)頁面設(shè)置一個(gè)state對(duì)象(使用pushState或者replaceState)之后用戶重啟了瀏覽器。當(dāng)頁面重新加載，頁面將收到onload事件，但不會(huì)有popstate事件。然而，如果你讀取history.state屬性，將在popstate事件發(fā)生后得到這個(gè)state對(duì)象：

var currentState = history.state; //得到當(dāng)前頁面設(shè)置的history.pushState的state對(duì)象參數(shù)值

調(diào)用 history.pushState() 或者 history.replaceState() 不會(huì)觸發(fā) popstate 事件。 popstate事件只會(huì)在瀏覽器某些行為下觸發(fā)， 比如點(diǎn)擊后退、前進(jìn)按鈕(或者在JavaScript中調(diào)用history.back()、history.forward()、history.go()方法)。

例子：假設(shè)當(dāng)前頁面地址是http://example.com/index.html

window.onpopstate = function(event) {
  alert("location: " + document.location.href + ", state: " + JSON.stringify(event.state));//拿到history.state對(duì)象值
};
//綁定事件處理函數(shù). 
history.pushState({page: 1}, "title 1", "?page=100");    //添加并激活一個(gè)歷史記錄條目 http://example.com/index.html?page=100,條目索引為1    //history.state為{page: 1}
history.pushState({page: 2}, "title 2", "?page=200");    //添加并激活一個(gè)歷史記錄條目 http://example.com/index.html?page=200,條目索引為2
history.replaceState({page: 3}, "title 3", "?page=300"); //修改當(dāng)前所在頁面激活的歷史記錄條目 http://ex..?page=200 變?yōu)?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方法與設(shè)置hash值的區(qū)別

在某種意義上，調(diào)用 pushState() 與 設(shè)置 window.location = "#foo" 類似，二者都會(huì)在當(dāng)前頁面創(chuàng)建并激活新的歷史記錄。但 pushState() 具有如下幾條優(yōu)點(diǎn)：

新的 URL 可以是與當(dāng)前URL同源的任意URL 。而設(shè)置 window.location 僅當(dāng)你只修改了哈希值時(shí)才保持同一個(gè)文件。如果需要，可以不必改變URL就能創(chuàng)建一條歷史記錄。而設(shè)置 window.location.hash = "#foo";只有在當(dāng)前哈希不是 #foo 的情況下， 才會(huì)創(chuàng)建一個(gè)新的歷史記錄項(xiàng)。我們可以為新的歷史記錄項(xiàng)關(guān)聯(lián)任意數(shù)據(jù)。而基于哈希值的方式，則必須將所有相關(guān)數(shù)據(jù)編碼到一個(gè)短字符串里。

需要注意的是通過history.pushState修改網(wǎng)頁的URL地址，在配合相關(guān)代碼顯示隱藏相應(yīng)界面便可以實(shí)現(xiàn)單頁面多界面相互操作。該方法比直接訪問URL地址速度快，執(zhí)行效率高，UI體驗(yàn)好，但會(huì)增加頁面的復(fù)雜性及耦合性，要視實(shí)際情況而定，一般都用在dialog彈出框上。

應(yīng)用：全站 AJAX，并使瀏覽器能夠抓取 AJAX 頁面

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

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

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

為了處理用戶前進(jìn)、后退，我們監(jiān)聽popstate事件。當(dāng)用戶點(diǎn)擊前進(jìn)或后退按鈕時(shí)，瀏覽器地址自動(dòng)被轉(zhuǎn)換成相應(yīng)的地址，同時(shí)popstate事件發(fā)生。在事件處理函數(shù)中，我們根據(jù)當(dāng)前的地址抓取相應(yīng)的內(nèi)容，然后利用 AJAX 拉取這個(gè)地址的真正內(nèi)容，呈現(xiàn)，即可。

最后，整個(gè)過程是不會(huì)改變頁面標(biāo)題的，可以通過直接對(duì)document.title賦值來更改頁面標(biāo)題。

總結(jié)

好了今天關(guān)于“在HTML5實(shí)現(xiàn)無刷新修改URL的方法總結(jié)！”這方面的干貨就分享到這邊啦！希望對(duì)大家有所幫助，如果大家有其他想要學(xué)習(xí)的內(nèi)容或者語言都能在W3Cschool這個(gè)網(wǎng)站找到學(xué)習(xí)資源！