JS中Location使用详解

概述

Location是一个包含当前URL相关信息的对象，它是浏览器原生提供的全局对象。使用Location对象可以获取当前URL、跳转页面、刷新页面、修改URL等操作。

Location的属性

href

用于获取或者设置当前页面的完整URL。

示例：

console.log(location.href); // 输出当前页面的URL
location.href = 'http://www.baidu.com'; // 跳转到百度页面

origin

用于获取当前页面的协议、主机名和端口号，但是不包括路径信息。

示例：

console.log(location.origin); // 输出当前页面的协议、主机名和端口号，如：http://www.example.com:8080

protocol

用于获取当前页面的协议名称，例如：http、https等。

示例：

console.log(location.protocol); // 输出当前页面的协议名称，如：http:

host

用于获取当前页面的主机名和端口号。

示例：

console.log(location.host); // 输出当前页面的主机名和端口号，如：www.example.com:8080

hostname

用于获取当前页面的主机名。

示例：

console.log(location.hostname); // 输出当前页面的主机名，如：www.example.com

port

用于获取当前页面的端口号。

示例：

console.log(location.port); // 输出当前页面的端口号，如：8080

pathname

用于获取当前页面的路径名。

示例：

console.log(location.pathname); // 输出当前页面的路径名，如：/index.html

search

用于获取当前页面URL中的查询字符串（问号后面的内容），如果不存在，则返回一个空字符串。

示例：

console.log(location.search); // 输出当前页面URL中的查询字符串，如：?id=123

hash

用于获取当前页面URL中的哈希值（#后面的内容），如果不存在，则返回一个空字符串。

示例：

console.log(location.hash); // 输出当前页面URL中的哈希值，如：#chapter-01

Location的方法

assign()

用于在当前窗口中加载新文档。

示例：

location.assign('http://www.baidu.com'); // 跳转到百度页面

reload()

用于重新加载当前文档。

示例：

location.reload(); // 重新加载当前页面

总结

Location是浏览器原生提供的全局对象，包含当前URL相关信息。可以使用Location的属性获取当前URL的各个部分，也可以使用Location的方法进行页面跳转、重新加载等操作，便于前端开发中进行URL相关的处理。