前言
本章介绍js中的location中的属性和方法。
文章目录
- 前言
- 什么是location
- 为什么要用location
- location对象属性
- location对象方法
- 总结
什么是location
在JavaScript中，location 是一个包含当前页面的URL信息的对象。它允许你获取和操作当前页面的URL，比如获取当前页面的URL，获取URL中的特定部分（比如主机名、路径、查询参数等），以及在不刷新页面的情况下改变页面的URL。location 对象提供了各种方法和属性来帮助你操作URL。以下是一些location 对象的常用属性和方法：
location.href：获取或设置完整的URL。location.host：获取或设置主机名和端口号。location.hostname：获取或设置主机名。location.protocol：获取或设置协议部分（如http://或https://）。location.pathname：获取或设置路径部分。location.search：获取或设置查询参数部分。location.hash：获取或设置URL中的哈希部分。location.reload()：重新加载当前页面。location.replace(url)：加载一个新的URL并替换当前的URL。
通过使用location 对象，你可以方便地获取和操作当前页面的URL信息，从而实现页面导航、URL参数传递、页面刷新等功能。
为什么要用location
在JavaScript中，location 对象是一个非常常用的对象，因为它提供了许多有用的功能来处理当前页面的URL。以下是一些使用location 的常见用途：
-
获取当前页面的URL：通过
location.href属性可以获取当前页面的完整URL，包括协议、主机、路径、查询参数和哈希部分。 -
解析URL的各个部分：通过
location.protocol、location.host、location.pathname、location.search和location.hash等属性，可以分别获取URL的协议、主机名、路径、查询参数和哈希部分。 -
导航到新页面：通过
location.href或location.assign()方法，可以将浏览器导航到一个新的URL。这可以用于跳转到其他页面或刷新当前页面。 -
修改当前页面的URL：通过
location.replace()或location.href属性，可以修改当前页面的URL。这可以用于在不刷新页面的情况下改变URL，例如在单页应用中实现页面切换效果。 -
获取和设置URL的查询参数：通过
location.search属性可以获取URL中的查询参数部分，也可以通过修改location.search的值来修改URL的查询参数。
总而言之，location 对象提供了许多有用的功能，可以方便地处理当前页面的URL。无论是获取URL信息、导航到新页面还是修改URL，location 都是一个非常有用的工具。
location对象属性
| 属性 | 描述 |
|---|---|
| hash | 设置或返回从井号 (#) 开始的 URL（锚）。 |
| host | 设置或返回主机名和当前 URL 的端口号。 |
| hostname | 设置或返回当前 URL 的主机名。 |
| href | 设置或返回完整的 URL。 |
| pathname | 设置或返回当前 URL 的路径部分。 |
| port | 设置或返回当前 URL 的端口号。 |
| protocol | 设置或返回当前 URL 的协议。 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分）。 |
location对象方法
-
location.assign()
跟href一样,可以跳转页面,记录历史,可以后退。代码示例
<body> <input type="button" value="跳转百度" onclick="f1()"> <script>function f1() {location.assign('https://www.baidu.com');} </script> </body>结果：
点击前
点击后
可以看到网址为百度，我就不截太大的图了。 -
location.replace()
替换当前页面,因为不记录历时,所以不能后退页面。代码演示：
<body> <input type="button" value="跳转百度" onclick="f1()"> <script>function f1() {location.replace('https://www.baidu.com');} </script> </body>结果：
点击前
点击后
可以看到不能回到上一个页面。 -
location.reload()
强制刷新页面，从服务器重新请求！ (如果有数据提交的话，会提示是否提交的)，迫使浏览器重新下载当前的页面。代码演示：
<body> <input type="button" value="刷新页面" onclick="f1()"> <script>function f1() {location.reload();} </script> </body>结果：
点击后会刷新页面。
总结
| 属性/方法 | 描述 |
|---|---|
location.href | 获取/设置当前页面的完整URL。 |
location.protocol | 获取当前页面的协议（例如，"http:"或"https:"）。 |
location.host | 获取当前页面的主机名和端口号。 |
location.hostname | 获取当前页面的主机名。 |
location.port | 获取当前页面的端口号。 |
location.pathname | 获取当前页面的路径部分。 |
location.search | 获取当前页面的查询参数部分（以问号开头）。 |
location.hash | 获取当前页面的锚点部分（以井号开头）。 |
location.assign(url) | 导航到指定的URL。 |
location.replace(url) | 使用指定的URL替换当前页面，不会生成新的历史记录。 |
location.reload() | 重新加载当前页面。 |
location.search = queryString | 将查询参数部分设置为指定的查询字符串。 |
location.hash = hashValue | 将锚点部分设置为指定的值。 |
