如何透過 Javascript 取得網址 與 URL 相關參數 – location

前言

現今網站製作，隨著前後端分離，JS被運用的越來越廣泛，在處裡頁面操作上，已經是算是普遍都會使用的工具。

要如何使用 JS 取得網址，也算是常常會遇到的問題，這邊就來整理製作網頁中，常常用到的幾個 Javascript 取得網址與目前 URL相關參數的語法。

Javascript 參數包含哪些

JS 的所有 URL 相關資料，都包含在 location 的語法中，其中包含了：

• location.href
• location.protocol
• location.host
• location.hostname
• location.origin
• location.port
• location.pathname
• location.search
• location.hash

以上參數，依據個別用途做說明，需要的可以點選以下連結查看。

Javascript 如何取得完整網址 : location.href

Javascript 取得當前協議 : location.protocol

Javascript 取得目前的網域名稱 : location.host

Javascript 取得目前的網域名稱 : location.hostname

Javascript 取得包含協定(http/https)的網域名稱 : location.origin

Javascript 取得目前端口號 : location.port

Javascript 取得目前頁面路徑 : location.pathname

Javascript 取得 URL Get 參數字串 : location.search

Javascript 取得網址錨點名稱 : location.hash

查看 location 各語法於瀏覽器相容性

寫程式，最常遇見，也是最不願意遇到的，指令在瀏覽器中並不相容，在使用前，花點小時間查看確認一下，可以免去日後修正的麻煩。

這邊一併整理，location 中各項語法在各個瀏覽器中的相容性，如下

• 查看 location.href 瀏覽器相容性
• 查看 location.protocol 瀏覽器相容性
• 查看 location.host 瀏覽器相容性
• 查看 location.hostname 瀏覽器相容性
• 查看 location.origin 瀏覽器相容性
• 查看 location.port 瀏覽器相容性
• 查看 location.pathname 瀏覽器相容性
• 查看 location.search 瀏覽器相容性
• 查看 location.hash 瀏覽器相容性