在网站的前台使用JS可以做很多的事情，比如利用JS获取当前网页的网址，参数，锚点，通讯协议等等。那么这篇文章就简单的说一下，利用 JavaScript 获取当前网页网址中部份信息的方法。
URL网址的构成
利用js获取或操作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.freexyz.cn
打印结果：
https://www.freexyz.cn
带有hash值的URL测试
浏览器地址：
https://www.freexyz.cn#mochu
打印结果：
https://www.freexyz.cn#mochu
带有参数的URL测试
浏览器地址：
https://www.freexyz.cn/?=mochu
打印结果：
https://www.freexyz.cn/?=mochu
注：由上面的几个小测试可以看出，window.location.href 可以获取浏览器中完整的URL地址
js获取网址中的端口号
js 中利用 window.location.port 获取网址中带有端口号
JS代码
//window.location.port console.log(window.location.port);
带有端口的网址测试
浏览器地址
https://www.freexyz.cn:8080
打印结果：
8080
不带端口的网址测试
浏览器地址
https://www.freexyz.cn
打印结果：
NULL
注：window.location.port 只能返回网址中带有的端口，如果网址中不带有端口则返回为空
js获取网址中的锚点的值
JS中使用 window.location.hash 获取URL中锚点的值
JS代码
//window.location.hash console.log(window.location.hash);
带有锚点的URL测试
浏览器地址
https://www.freexyz.cn/index.html#mochu
打印结果：
#mochu
JS 获取 url 中的协议部份
js 中利用 window.location.protocol 获取网址的协议部份，如http，https等
JS代码
//window.location.protocol console.log(window.location.protocol);
测试
浏览器地址
https://www.freexyz.cn
打印结果：
https
js 获取URL中文件地址
js中利用 window.location.pathname 获取文件的路径
js代码
//window.location.pathname console.log(window.location.pathname);
测试
浏览器地址
https://www.freexyz.cn/post/1.html
打印结果：
/post/1.html
JS获取URL中的参数部份
js 中的 window.location.search 可以获取 url 中的参数部份
js代码
//window.location.search console.log(window.location.search);
测试
浏览器地址
https://www.freexyz.cn/index.php?s=4
打印结果：
?s=4
js获取url中的主网址部份
window.location.host 可以获取到url地址中的主网址部份
js代码
//window.location.host console.log(window.location.host);
测试
浏览器地址
https://www.freexyz.cn/index.php
打印结果：
www.freexyz.cn
注意：以上JS代码的 console.log()，为测试时，方便向浏览器控制台打印数据所用到的。
