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