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.hrefconsole.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.portconsole.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.hashconsole.log(window.location.hash);
带有锚点的URL测试
浏览器地址
https://www.feiniaomy.com/index.html#mochu
打印结果:
#mochuJS 获取 url 中的协议部份
js 中利用 window.location.protocol 获取网址的协议部份,如http,https等
JS代码
//window.location.protocolconsole.log(window.location.protocol);
测试
浏览器地址
https://www.feiniaomy.com
打印结果:
httpsjs 获取URL中文件地址
js中利用 window.location.pathname 获取文件的路径
js代码
//window.location.pathnameconsole.log(window.location.pathname);
测试
浏览器地址
https://www.feiniaomy.com/post/1.html
打印结果:
/post/1.htmlJS获取URL中的参数部份
js 中的 window.location.search 可以获取 url 中的参数部份
js代码
//window.location.searchconsole.log(window.location.search);
测试
浏览器地址
https://www.feiniaomy.com/index.php?s=4
打印结果:
?s=4js获取url中的主网址部
window.location.host 可以获取到url地址中的主网址部份
js代码
//window.location.hostconsole.log(window.location.host);
测试
浏览器地址
https://www.feiniaomy.com/index.php
打印结果:
www.feiniaomy.com
把稳:以上JS代码的 console.log(),为测试时,方便向浏览器掌握台打印数据所用到的。关于此方法的利用,可查看本博客的干系文章。