javascript中location对象的属性与方法

前言

本章介绍js中的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 的常见用途:

  1. 获取当前页面的URL:通过location.href 属性可以获取当前页面的完整URL,包括协议、主机、路径、查询参数和哈希部分。

  2. 解析URL的各个部分:通过location.protocollocation.hostlocation.pathnamelocation.searchlocation.hash 等属性,可以分别获取URL的协议、主机名、路径、查询参数和哈希部分。

  3. 导航到新页面:通过location.hreflocation.assign() 方法,可以将浏览器导航到一个新的URL。这可以用于跳转到其他页面或刷新当前页面。

  4. 修改当前页面的URL:通过location.replace()location.href 属性,可以修改当前页面的URL。这可以用于在不刷新页面的情况下改变URL,例如在单页应用中实现页面切换效果。

  5. 获取和设置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将锚点部分设置为指定的值。
  • 28
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值