乌徒帮技术范儿技术中心Javascript › javascript中window.location详解

javascript中window.location详解

分类:Javascript

我们在javascript中利用window.location来获取和网页网址相关的信息。那么window.location到底有多少种用法呢?本文就对window.location的各种用法进行一个梳理。

1、进一步认识我们的网址

当我们进入一个网页的时候,我们肉眼所能看到的网页地址其实由多个部分组成:

scheme://host:port/path?query#fragment

scheme:通信协议,常用的http,ftp,maito等

host:主机、服务器(计算机)域名系统?(DNS) 主机名或 IP 地址,我们也可以称之为域名部分;

port:端口号,整数,可选,省略时使用方案的默认端口,如http的默认端口为80。

path:路径,在域名下的访问路径,URI,由零或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。

query:查询,可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数,用"&"符号隔开,每个参数的名和值用"="符号隔开。

fragment:信息片断,字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。(也称为锚点。)

2、通过window.location分别获取上述各个网址部分

例如我们有这样一个网址:https://www.utubon.com:8080/demo/theme.php?name=secondary&time=10#description

这是一个几乎包含了所有要素的url地址,我们通过window.location去获取它的各个部分。

获取当前页面的完整url地址

[code lang="javascript" line="1"]
var href = window.location.href;
//返回https://www.utubon.com:8080/demo/theme.php?name=secondary&time=10#description
[/code]

获取通信协议

[code lang="javascript" line="1"]
var scheme =?window.location.protocol;
//返回 https:
[/code]

获取主机(域名)

[code lang="javascript" line="1"]
var host = window.location.host
//返回www.utubon.com
[/code]

获取访问的端口号

[code lang="javascript" line="1"]
var port = window.location.port
//返回8080
[/code]

获取当前页面的路径地址

[code lang="javascript" line="1"]
var path = window.location.pathname
//返回?/demo/theme.php
[/code]

获取查询字段

[code lang="javascript" line="1"]
var query = window.location.search
//返回 ??name=secondary&time=10
[/code]

获取锚点

[code lang="javascript" line="1"]
var hash = window.location.hash
//返回?#description
[/code]

在上述各个数据中,hash值是用php无法获得的,因此,要获得一个网页网址的锚点信息,必须使用javascript来获得。

填写个人信息,赶快回复吧!