《前端實戰(zhàn)總結(jié)》如何在不刷新頁面的情況下改變URL
由于公司最近有個需求是想讓我們的get請求的參數(shù)都直接顯示在瀏覽器url上，這樣我們就可以直接通過復(fù)制url來顯示對應(yīng)的界面數(shù)據(jù)了。
背景介紹
由于我們常用的http請求一般是基于XHR對象的實現(xiàn)或者fetch實現(xiàn)，這種請求操作并不會觸發(fā)瀏覽器url的變化，這樣雖然也能正常請求數(shù)據(jù)并渲染到頁面，但是如果用戶在當(dāng)前頁面操作了某個get請求并得到了某條數(shù)據(jù)，想通過鏈接將當(dāng)前看到的界面分享給其他人時，那么此時瀏覽器url并不會變化，通過鏈接只能訪問到初始化的數(shù)據(jù)界面，此時并不能達到理想的效果。如下圖所示：
當(dāng)我們在該頁面將列表切換到第二頁時，瀏覽器url并沒有變化，所以將鏈接復(fù)制給其他人打開并不會將列表結(jié)果切換到第二頁，而是重新初始化。
實現(xiàn)過程
通過以上的背景和問題，我們可以想想可以怎么實現(xiàn)呢？我的第一個反應(yīng)就是使用location API來實現(xiàn)，我們可以使用location.search來讀寫瀏覽器query參數(shù)：
location.search = '?page=2';
這段代碼雖然可以改變?yōu)g覽器url，如下圖所示：
但會出現(xiàn)一個性能問題，就是當(dāng)我們執(zhí)行了以上代碼后，整個瀏覽器都會刷新，導(dǎo)致我們不想刷新的部分也刷新了，那我們有辦法可以讓它局部刷新嗎？答案是必須有。
這里就要引出我們本文的重點：history API。
history API
Window.history是一個只讀屬性，用來獲取History 對象的引用，History 對象提供了操作瀏覽器會話歷史（瀏覽器地址欄中訪問的頁面，以及當(dāng)前頁面中通過框架加載的頁面）的接口。HTML5引入了 history.pushState() 和 history.replaceState() 方法，它們分別可以添加和修改歷史記錄條目。
使用 history.pushState() 可以改變referrer，它在用戶發(fā)送 XMLHttpRequest 請求時在HTTP頭部使用，改變state后創(chuàng)建的 XMLHttpRequest 對象的referrer都會被改變。因為referrer是標(biāo)識創(chuàng)建 XMLHttpRequest 對象時 this 所代表的window對象中document的URL。
那么我們就可以使用pushState來實現(xiàn)我們的更新瀏覽器url功能了。
pushState() 方法
pushState() 需要三個參數(shù): 一個狀態(tài)對象, 一個標(biāo)題 (目前已忽略), 和 (可選的) 一個URL：
狀態(tài)對象 — 狀態(tài)對象state是一個JavaScript對象，通過pushState () 創(chuàng)建新的歷史記錄條目。無論什么時候用戶導(dǎo)航到新的狀態(tài)，popstate事件就會被觸發(fā)，且該事件的state屬性包含該歷史記錄條目狀態(tài)對象的副
標(biāo)題 — Firefox 目前忽略這個參數(shù)，但未來可能會用到。在此處傳一個空字符串應(yīng)該可以安全的防范未來這個方法的更改?；蛘?，你可以為跳轉(zhuǎn)的state傳遞一個短標(biāo)
URL — 該參數(shù)定義了新的歷史URL記錄。注意，調(diào)用 pushState() 后瀏覽器并不會立即加載這個URL，但可能會在稍后某些情況下加載這個URL，比如在用戶重新打開瀏覽器時。新URL不必須為絕對路徑。如果新URL是相對路徑，那么它將被作為相對于當(dāng)前URL處理。新URL必須與當(dāng)前URL同源，否則 pushState() 會拋出一個異常。該參數(shù)是可選的，缺省為當(dāng)前UR
實現(xiàn)
/**
* 設(shè)置瀏覽器url
* params：queryObj（參數(shù)對象）
*/
function setBrowserUrl(queryObj){
// stringify是queryString的一個api，具體可以查看node官網(wǎng)，也可以自己實現(xiàn)
var url = `${location.pathname}?${stringify(queryObj)}`
history.pushState({url: url}, '', url)
}
這樣我們就可以在請求的同時，調(diào)用setBrowserUrl方法來改變?yōu)g覽器url了。接下來我們就可以監(jiān)聽瀏覽器url的變化，如果瀏覽器url有需要的請求參數(shù)，那么我們就根據(jù)請求參數(shù)來請求數(shù)據(jù)，沒有就初始化頁面，這樣當(dāng)我們查看某條記錄或者某個小秘密時，想把該數(shù)據(jù)保存下來并分享給被人，是不是就可以實現(xiàn)了呢？
總結(jié)
基于H5 history可以實現(xiàn)很多優(yōu)雅使用的工具，比如路由，緩存控件等等。
如果想了解更多webpack，gulp，css3，javascript，nodeJS，canvas等前端知識和實戰(zhàn)，歡迎在公眾號《趣談前端》加入我們一起學(xué)習(xí)討論，共同探索前端的邊界。
更多推薦
從零開發(fā)一款輕量級滑動驗證碼插件(深度復(fù)盤)
