javascript中location对象的属性与方法

news2024/9/24 17:19:18

前言

本章介绍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`	将锚点部分设置为指定的值。