JS中Location对象详解

介绍

Location 对象包含有关当前 URL 的信息。document和window对象中都有location属性，可以通过window.location和document.location访问。

URL：统一资源定位器（URL）是指定在 Internet 上可以找到资源的位置的文本字符串。在 HTTP 的上下文中，URL 被叫做”网络地址“或“链接”。

url的组成：

（1）protocol 通信协议常用的http、ftp、maito等 
（2）host 主机(域名) www.bilibili.com
（3）port 端口号可选，省略时使用方案的默认端口如http的默认端口为80
（4）path 路径由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
（5）query 参数以键值对的形式通过&符号分隔开来
（6）fragment 片段#后面内容常见于链接锚点

协议  :/ 域名 ：端口号 / 路径 ？参数 # 锚点  => protocol:/host[:port]/path[?query]#fragment

例如：https://www.baidu.com/?tn=44004473_8_oem_dg&ie=utf-8

location对象

location对象属性

hash	设置或返回 URL 的锚部分 (#)。
host	设置或返回 URL 的主机名和端口号。
hostname	设置或返回 URL 的主机名。
href	设置或返回整个 URL。
origin	返回 URL 的协议、主机名和端口号。
pathname	设置或返回 URL 的路径名。
port	设置或返回 URL 的端口号。
protocol	设置或返回 URL 的协议。
search	设置或返回 URL 的查询字符串部分。

以百度为例

Location 对象方法

方法	描述
assign()	加载新文档。
reload()	重新加载当前文档。
replace()	用新文档替换当前文档。

//记录浏览历史，所以实现可后退功能
location.assign('http://www.bilibili.com');
//替换网址 没有记忆功能
location.replace('http://www.bilibili.com');
//重新加载当前页面，可以接受一个Boolean类型的参数，参数为true,强制从服务器重新获取，为false时从缓存中读取。默认值为false
location.reload() 

注意 如果想要获得当前文档的完整url字符串，有四种方式

1. document.location
2. document.location.href
3. document.URL
4. document.location.toString()