您的位置 首页 php

利用JS获取当前页面网址及其它参数的方法

在网站的前台使用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);
 

浏览器地址:

 

打印结果:

 

带有hash值的URL测试

浏览器地址:

#mochu
 

打印结果:

#mochu
 

带有参数的URL测试

浏览器地址:

 

打印结果:

 

注:由上面的几个小测试可以看出,window.location.href 可以获取浏览器中完整的URL地址

js获取网址中的端口号

js 中利用 window.location.port 获取网址中带有端口号

JS代码

//window.location.port
console.log(window.location.port);
 

带有端口的网址测试

浏览器地址

 

打印结果:

8080
 

不带端口的网址测试

浏览器地址

 

打印结果:

NULL
 

注:window.location.port 只能返回网址中带有的端口,如果网址中不带有端口则返回为空

js获取网址中的锚点的值

JS中使用 window.location.hash 获取URL中锚点的值

JS代码

//window.location.hash
console.log(window.location.hash);
 

带有锚点的URL测试

浏览器地址

#mochu
 

打印结果:

#mochu
 

JS 获取 url 中的协议部份

js 中利用 window.location.protocol 获取网址的协议部份,如http,https等

JS代码

//window.location.protocol
console.log(window.location.protocol);
 

测试

浏览器地址

 

打印结果:

https
 

js 获取URL中文件地址

js中利用 window.location.pathname 获取文件的路径

js代码

//window.location.pathname
console.log(window.location.pathname);
 

测试

浏览器地址

 

打印结果:

/post/1.html
 

JS获取URL中的参数部份

js 中的 window.location.search 可以获取 url 中的参数部份

js代码

//window.location.search
console.log(window.location.search);
 

测试

浏览器地址

 

打印结果:

?s=4
 

js获取url中的主网址部

window.location.host 可以获取到url地址中的主网址部份

js代码

//window.location.host
console.log(window.location.host);
 

测试

浏览器地址

 

打印结果:

www.feiniaomy.com
 

注意:以上JS代码的 console.log(),为测试时,方便向浏览器控制台打印数据所用到的。关于此方法的使用,可查看本博客的相关文章。

文章来源:智云一二三科技

文章标题:利用JS获取当前页面网址及其它参数的方法

文章地址:https://www.zhihuclub.com/152304.shtml

关于作者: 智云科技

热门文章

网站地图