[筆記] 瀏覽器的跳轉處理之 location.href 和 location.replace

HTML5 的表格送出,或是點擊某個按鈕執行完一定內容後,會有機會使用到 JavaScript 來跳轉當前頁面。這邊筆記下 location.hreflocation.replace 兩者用法的差異,以及合適的使用方式。
html logo


內容

瀏覽器的 Window 物件,內含屬性有一個為 location。當你使用 JavaScript 使用 location.href 時,你需要指定一個要前往的頁面路徑。

頁面路徑寫法不限,相對或絕對都可以,像是 window.location.href = ‘https://www.google.com’

若你是使用 location.replace,此為一個函式。你需把頁面路徑當作參數傳入,像是 window.location.replace(‘https://www.google.com’)

差異

location.href 會連結瀏覽器的歷史記錄,也就是你可以透過瀏覽器進行上下一頁。location.replace 則不會有歷史記錄。

Best Practice

若你要進行「表單送出」、「點擊下載」…… 等操作時,為了避免使用者不小心點了上一頁而導致表單或是下載行為重複執行,應該使用 location.replace() 方法。反之,可以使用 location.href 即可

location.reload()

這就如同使用者去點擊「重新整理」按鈕。不過若你在該頁面有 POST 表單…等行為時,就會觸發 Session 的保護機制,跳出「是否重新發送」或是網頁過期提示


參考資料

1. Javascript 頁面跳轉、刷新、重定向的幾種方式
2. 細談 location.href 與 location.replace 的差別與實務應用

按讚加入粉絲團