[小菜一碟] 如何依據網頁內容變換網址但不必重新整理網頁

自從 AJAX 問世之後,由於節省頻寬、提升網頁回應速度的效果顯著,被大量採用,甚至發展出了 SPA,但是這樣反而出現了一個副作用,就是我們無法將網頁最終呈現的結果透過 URL 分享出去,不利於 SEO,我們就來看一下,怎麼在都是用非同步請求取得網頁內容的情況下,變換網址。

假定,我們有一個產品頁面,產品頁面有幾個選項可以讓使用者篩選,篩選這個動作使用非同步請求向後端伺服器取得篩選結果,另外,我們又希望使用者可以透過網址,分享篩選出來的結果,這時候我們就要想辦法讓網址隨著使用者的篩選而變換。

window.history.replaceState

如果我們想要單純地變換目前網址列中的網址,可以使用 window.history.replaceState() 這個方法,我們可以透過這個方法去改變網址列上的網址,它有三個參數:

  • state object:是一個跟瀏覽歷史瀏覽記錄有關的 JavaScript 物件,可以藉由 window.history.state 取得目前的 state object,或是在 window.onpopstate 的事件中也會取得與觸發該事件相關歷史瀏覽記錄的 state object。
  • title:用來描述 state object 的標題
  • URL:歷史瀏覽記錄的 URL

window.history.pushState

window.history.pushState() 跟 window.history.replaceState() 使用方式是一樣的,差別只在於前者會新增一個歷史瀏覽記錄,後者是修改目前的歷史瀏覽記錄,有時候我們會想保留使用者的操作記錄,以便讓使用者可以上一頁、下一頁來瀏覽我們的網站,我們就要改用 window.history.pushState()。

以上,這個小技巧分享給大家,希望能幫助到有相同問題的朋友。

C# 指南ASP.NET 教學ASP.NET MVC 指引
Azure SQL Database 教學SQL Server 教學Xamarin.Forms 教學