在網(wǎng)站的前臺(tái)使用JS可以做很多的事情，比如利用JS獲取當(dāng)前網(wǎng)頁的網(wǎng)址，參數(shù)，錨點(diǎn)，通訊協(xié)議等等。那么這篇文章就簡單的說一下，利用 JAVAscript 獲當(dāng)前網(wǎng)頁網(wǎng)址中部份信息的方法。
URL網(wǎng)址的構(gòu)成
一個(gè)完成的url由通信協(xié)議，主機(jī)，端口號等幾大部份組成，如以下格式
scheme://host:port/path?query#fragment
scheme：通信協(xié)議 常用的http,ftp,maito等
host：主機(jī)服務(wù)器(計(jì)算機(jī))域名系統(tǒng) (DNS) 主機(jī)名或 IP 地址。
port：端口號整數(shù)，如省略則默認(rèn)為80
path：路徑一個(gè)或多個(gè)"/"符號隔開的字符串，一般用來表示主機(jī)上的一個(gè)目錄或文件地址。
query：查詢，可選，用于給動(dòng)態(tài)網(wǎng)頁傳遞參數(shù)，多個(gè)參數(shù)用 & 隔開
fragment：信息片斷字符串，也可以叫做錨點(diǎn)，用于指定網(wǎng)絡(luò)資源中的片斷。
JS獲取當(dāng)前網(wǎng)址
JS 中利用 window.location.href 獲取當(dāng)前頁面瀏覽器地址欄中的完整url
JS代碼：
//window.location.href console.log(window.location.href);
普通網(wǎng)址測試
瀏覽器地址：
https://www.feiniaomy.com
打印結(jié)果：
https://www.feiniaomy.com
帶有hash值的URL測試
瀏覽器地址：
https://www.feiniaomy.com#mochu
打印結(jié)果：
https://www.feiniaomy.com#mochu
帶有參數(shù)的URL測試
瀏覽器地址：
https://www.feiniaomy.com/?=mochu
打印結(jié)果：
https://www.feiniaomy.com/?=mochu
注：由上面的幾個(gè)小測試可以看出，window.location.href 可以獲取瀏覽器中完整的URL地址
js獲取網(wǎng)址中的端口號
js 中利用 window.location.port 獲取網(wǎng)址中帶有端口號
JS代碼
//window.location.port console.log(window.location.port);
帶有端口的網(wǎng)址測試
瀏覽器地址
https://www.feiniaomy.com:8080
打印結(jié)果：
8080
不帶端口的網(wǎng)址測試
瀏覽器地址
https://www.feiniaomy.com
打印結(jié)果：
NULL
注：window.location.port 只能返回網(wǎng)址中帶有的端口，如果網(wǎng)址中不帶有端口則返回為空
js獲取網(wǎng)址中的錨點(diǎn)的值
JS中使用 window.location.hash 獲取URL中錨點(diǎn)的值
JS代碼
//window.location.hash console.log(window.location.hash);
帶有錨點(diǎn)的URL測試
瀏覽器地址
https://www.feiniaomy.com/index.html#mochu
打印結(jié)果：
#mochu
JS 獲取 url 中的協(xié)議部份
js 中利用 window.location.protocol 獲取網(wǎng)址的協(xié)議部份，如http，https等
JS代碼
//window.location.protocol console.log(window.location.protocol);
測試
瀏覽器地址
https://www.feiniaomy.com
打印結(jié)果：
https
js 獲取URL中文件地址
js中利用 window.location.pathname 獲取文件的路徑
js代碼
//window.location.pathname console.log(window.location.pathname);
測試
瀏覽器地址
https://www.feiniaomy.com/post/1.html
打印結(jié)果：
/post/1.html
JS獲取URL中的參數(shù)部份
js 中的 window.location.search 可以獲取 url 中的參數(shù)部份
js代碼
//window.location.search console.log(window.location.search);
測試
瀏覽器地址
https://www.feiniaomy.com/index.php?s=4
打印結(jié)果：
?s=4
js獲取url中的主網(wǎng)址部
window.location.host 可以獲取到url地址中的主網(wǎng)址部份
js代碼
//window.location.host console.log(window.location.host);
測試
瀏覽器地址
https://www.feiniaomy.com/index.php
打印結(jié)果：
www.feiniaomy.com
注意：以上JS代碼的 console.log()，為測試時(shí)，方便向?yàn)g覽器控制臺(tái)打印數(shù)據(jù)所用到的。關(guān)于此方法的使用，可查看本博客的相關(guān)文章。
