紀錄工作經驗、相關知識,解決技術相關問題。

Javascript

[JS] Javascript 取得目前 URL 與相關參數(總整理)

javascript location

location

前言

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

其中 URL 的處裡,也算是常常會遇到的問題,這邊就來整理製作網頁中,常常用到的幾個 Javascript 取得目前 URL 與相關參數的語法。

Javascript 參數包含哪些

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

這邊針對以上作個別說明,有需要可以點選以上連結觀看。

location 個參數

以下就針對上面列舉的,一一個別做介紹。

JavaScript 取得 URL 相關參數

這邊我們先假定,我們目前的網址是 :

https://www.website.com:80/type/page.html?id=111&t=9#template

接下來,我們用 JS 進行以下操作,來取得上面假定的 URL 資訊。

JS 取得完整網址 : location.href

想取得目前當前完整的網址,使用 location 中的 href,如下:

當前網址:

https://www.website.com:80/type/page.html?id=111&t=9#template

取得範例:

let s = location.href;

console.log(s)

// 輸出 : https://www.website.com/type/page.html?id=111&t=9#templat

查看 location.href 瀏覽器相容性

JS 取得當前協議 : location.protocol

有時候,我們會需要用 JS 取得網站當前協議,用來判斷網頁目前是 http 還是 https,這時可以使用 location 中的 protocol ,如下:

當前網址:

https://www.website.com:80/type/page.html?id=111&t=9#template

取得範例:

let s = location.protocol;

console.log(s)

// 輸出 : https:

查看 location.protocol 瀏覽器相容性

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

取得目前網域名稱,在 location 中有兩個可以使用,分別為 host 與 hostname,host 的執行結果如下:

當前網址:

https://www.website.com:80/type/page.html?id=111&t=9#template

取得範例:

let s = location.host;

console.log(s)

// 輸出 : www.websize.com

查看 location.host 瀏覽器相容性

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

取得目前網域名稱 ,另一個的方法是使用 hostname 的執行結果如下:

當前網址:

https://www.website.com:80/type/page.html?id=111&t=9#template

取得範例:

let s = location.hostname;

console.log(s)

// 輸出 : www.websize.com

查看 location.hostname 瀏覽器相容性

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

如果你想取得包含前面協定的網址,一般情況可以這樣做

當前網址:

https://www.website.com:80/type/page.html?id=111&t=9#template

取得範例:

let s = location.protocol + '//' + location.hostname

console.log(s)

// 輸出 : https://www.websize.com

另一個較簡潔的作法,是使用 location 中的 origin ,來直接取得名稱, 用法如下 :

let s = location.origin;

console.log(s)

// 輸出 : https://www.websize.com

查看 location.origin 瀏覽器相容性

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

取得當前端口的 port ,可以使用 location 中的 port, 用法如下 :

當前網址:

https://www.website.com:80/type/page.html?id=111&t=9#template

取得範例:

let s = location.port;

console.log(s)

// 輸出 : 80

查看 location.port 瀏覽器相容性

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

JS 要取得目前頁面的路徑,使用 location 中的 pathname, 用法如下 :

當前網址:

https://www.website.com:80/type/page.html?id=111&t=9#template

取得範例:

let s = location.pathname;

console.log(s)

// 輸出 : /type/page.html

查看 location.pathname 瀏覽器相容性

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

這應該是製作網頁最常用到的一個,透過 JS 取得 Get 參數,再加以判斷,不過 JS 本身沒辦法單獨取得 Get 參數,通常是透過 location 中的 search 來取得所有 Get 參數的字串,再額外加工處裡。

想知道要如何加工處理,可以留言,有人想知道的話,會再另外發一篇說明。

location 中的 search 用法如下 :

當前網址:

https://www.website.com:80/type/page.html?id=111&t=9#template

取得範例:

let s = location.search;

console.log(s)

// 輸出 : ?id=111&t=9

查看 location.search 瀏覽器相容性

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

網頁有時候會用錨點,來快速移動到指定的 id 區塊,當 JS 需要取得目前的錨點時,可使用 location 中的 hash,用法如下:

當前網址:

https://www.website.com:80/type/page.html?id=111&t=9#template

取得範例:

let s = location.search;

console.log(s)

// 輸出 : #template

查看 location.hash 瀏覽器相容性

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

寫程式,最常遇見,也是最不願意遇到的,指令在瀏覽器中並不相容,這邊一併整理,location 中各項語法在各個瀏覽器中的相容性,如下

發表迴響