如何在不刷新頁面的情況下改變URL

本文為飢人谷原創文章，首發於 前端學習指南。

問沒有具體業務場景的技術問題都是耍流氓，那在回答這個問題之前先簡單介紹一下業務場景。

下午6點半，小 H寫了一個下午的代碼揉揉眼睛伸個懶腰，「今天終於能早點回去了，先刷會知乎歇會」。突然，產品 小U一臉淫笑飄了過來，小 H 略感不妙。

『嗨嗨~ 你這工作狀態不飽和啊，有個小需求來看看~。現在需要做一個新聞展示頁，主功能區塊分為新聞列表和分頁兩部分。很簡單，兩天能搞定吧~』小 U 說。

小 H 看了看原型稿，心想確實不難。點擊分頁時把直接把分頁參數傳遞給後台，頁面刷新後台直接返回渲染後的數據就行了，模板寫的好的話甚至 js 都不需要了。正當小 H 開口準備說說技術實現時，被小 U 打斷...

『不過為了體驗好一些，在用戶點下一頁的時候別刷新頁面』小 U 說。

『不刷新頁面沒關係，我用 ajax 可以實現，不過時間嘛...』小 H 略有所思

『果然是大牛啊，能實現我就放心了。時間好商量，不過這個項目特別急，晚上加加油啊』，說完小 U 就飄走了。

『cao, 看來又走不成了』小 H 嘀咕著。

兩分鐘後小 U 又跑了過來，『剛才忘了跟你說了，用戶點了下一頁後地址欄的地址要跟著變，這時候刷新頁面還能定位到當前頁』

『 ??x10000~~~』

整理下需求：

1. 點擊分頁頁碼可實現無刷新頁面載入
2. 同時 URL 在數據載入後會發生變化展示對應頁碼

3. 刷新頁面（帶頁碼參數）會定位到當前頁碼
4. 當點擊返回時可會到上個頁面

效果如Demo 所示。

對於第1條，我們可以使用 ajax 動態獲取對應頁碼的數據。

對於第2條，我們可以使用 html5的 api「history.pushState」，用於改變 URL。

對於第3條，我們可以根據 URL 中頁碼參數獲取對應頁碼的數據再做展示。

對於第4條，可以使用 「window.onpopstate」來監聽返回事件

那history.pushState如何使用呢？比如當用戶點擊頁碼按鈕時，可使用 ajax 獲取對應頁碼的數據，拼裝 DOM 放到頁面上，然後調用下面的 setUrl 方法實現瀏覽器 URL 的更新。

function setUrl(page){n var url = location.pathname + ?page= + pagen history.pushState({url: url, title: document.title}, document.title, url)n}n

history.pushState() 帶有三個參數：一個狀態對象，一個標題（現在被忽略了），以及一個可選的URL地址。

• state object — 狀態對象是一個由 pushState()方法創建的與歷史紀錄相關的JS對象。
• title — 火狐瀏覽器現在已經忽略此參數，將來也許可能被使用。考慮到將來有可能的改變，傳遞一個空字元串是安全的做法。當然，你可以傳遞一個短標題給你要轉變成的狀態。
• URL — 這個參數提供了新歷史紀錄的地址。請注意，瀏覽器在調用pushState()方法後不會去載入這個URL，但有可能在之後會這樣做，比如用戶重啟瀏覽器之後。新的URL可以是絕對地址，也可以是相對地址。新URL必須和當前URL在同一個源下。

想看實現效果？參考這裡一個無刷新分頁的 DEMO ，建議看看源碼實現。

加飢人谷官網微信號: hungervalley ，暗號：來自知乎

每日一題，每周資源推薦，精彩博客推薦，工作、筆試、面試經驗交流解答，免費直播課，群友輕分享... ，數不盡的福利免費送