如何用javascript取得網址(URL)

Photo on Foter.com

在介紹方法之前先來簡略介紹一下網址的組成

可以把網址想成是網路世界的地址

一個標準的網址格式是這樣

protocol://host.domain/path/filename

protocol是網路的通訊協定名稱

最常見的就是http, https或ftp

host.domain是造訪網站的主機名稱

path/filename是造訪網站的路徑和檔案名稱

舉個實際例子

一個常見的網址大概長這樣

https://www.w3schools.com/js/js_window_location.asp

他的protocol就是https

hostname就是www.w3schools.com

/js/js_window_location.asp就是path/filename

接著來介紹幾個取得網址的property

window.location.href 取得目前造訪網頁的網址

window.location.protocol 取得目前造訪網頁的通訊協定(protocol)

window.location.host 取得目前造訪網頁的主機名稱(hostname), 包含port

window.location.hostname 取得目前造訪網頁的主機名稱(hostname)

window.location.pathname 取得目前造訪網頁的路徑(path)

window.location.hash 取得目前造訪網頁錨點(#)(hashtag)

window.location.port 取得目前造訪網頁的port

window.location.search 取得目前造訪網頁查詢參數(?)

Demo

關於應用

什麼時候會用到?

有的時候希望使用者點選網頁上的按鈕

不要重新載入頁面只改變網址

如果你喜歡這篇文章

或是覺得這篇文章對你有幫助

不要忘了給我一些掌聲 :)