window.location 教學 – 獲取及操作瀏覽器網址

前言

當初會寫這篇是因為在寫專案時，需要判斷當前頁面來展開一個tree menu

本來想說用 window.location然後自己切，想不到一查，不得了!!

原來有這麼多好用的屬性可以配合不同狀況

window.location

常見屬性

• href : 取得網頁的完整網址
• protocol : 取得網頁的通訊協定
• host : 取得網頁的主機名稱 (包含port)
• hostname : 取得網頁的主機名稱
• pathname : 取得網頁的路徑
• hash : 取得網頁的錨點
• port : 取得網頁的port (如果有的話)
• search : 取得網頁的查詢字串
  • https://zyrastory.com/?s=food > window.location.search 就會取得 food

舉例來說，假設現在網頁是 【中山店】鰻魚飯老店 – 肥前屋

網址是 : https://zyrastory.com/delicious-food/taipei-delicious-food/zhongshan-unagirestaurant/#%e8%8f%9c%e5%93%81

這裡的 %e8%8f%9c%e5%93%81 是中文 菜品

那這時候去下window.location就會長的像是這樣

其他運用

跳轉頁面

window.location.href = "欲前往網站之網址"
window.location = "欲前往網站之網址"

兩者均可以達到跳轉的效果

重新載入

window.location.reload();

替換紀錄

window.location.replace("欲替換之網址");

不會在瀏覽器內新增新的紀錄，而是會替換掉當前的 (當然也會跳轉至新的頁面)

而這就會影響到上一頁等操作

結論

這一期簡單的講解一下 window.location 常見的幾種屬性以及方法

但其實前端網址印象中還有歷史紀錄等比較麻煩的操作，可能有空整理下再來跟大家說明

🧡希望這篇文章有幫到您一點小忙

🧡幫我點一個小小的廣告或留言，都是對我的支持(每天都只有詐騙跟色情留言…)

✅如有任何疑問，歡迎透過留言或messenger讓我知道 !

一些隨機的筆記