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