浏览器中BOM(浏览器对象模型)重点掌握对象之Location对象的属性与方法

简介: 在学过JavaScript之后,我们都知道对象分为内置对象 、宿主对象 、自定义对象,我们经常用到的浏览器中的内置对象就是宿主对象的一种,浏览器的内置对象有很多,本文就来详细讲解一下Location对象的属性与方法吧。

Location对象的作用


Location对象包含着关于当前网页的URL信息,并且可以对URL进行拆分 、读写等各种操作。


Location对象的引用


我们可以通过浏览器的全局对象window来引用Location,像这样window.location ,也可以直接通过 location 来引用Locagtion对象。


window.location === location      //返回 true


我们在浏览器的控制台中引用一下Location对象,看看会返回什么


e31a0babc9db17600f171ddb37fdc6b8.png


可以看到,返回的Location对象中有许多的属性和方法,接下来我们就对这些属性和方法进行讲解。


Location对象的属性


我们来看一下Location对象的属性,下面用一张表格来呈现:


属性 描述
href 设置或返回完整的URL
protocol 设置或返回URL的协议部分
host 设置或返回主机名和URL的端口号
hostname 设置或返回URL的主机名
pathname 设置或返回URL的路径
port 设置或返回URL的端口号
search 设置或返回URL的参数部分,即?后面的参数部分
hash 设置或返回URL的锚点部分,即#后面的锚点部分


接下来,看一下URL的格式是什么样的:协议://主机名:端口/路径?查询参数#锚

再来看看一个真实的URL


https://www.baidu.com/index.html?query=java&i=0#_1


我们在该URL页面调用Location对象的各个属性的返回值如下:


    location.href   //返回https://www.baidu.com:5000/index.html?query=java&i=0#_1
    location.protocol  //返回  https:
    location.host      //返回  www.baidu.com:5000
    location.hostname  //返回  www.baidu.com
    location.pathname  //返回  /index.html
    location.port      //返回   5000
    location.search    //返回  ?query=java&i=0
    location.hash      //返回  #_1


    这些属性是可读/写的,所以我们还可以通过给这些属性赋值,来改变当前页面的URL值,完成一些页面的跳转等操作,例如


      //给当前页面的location对象的href属性赋值一个新的URL地址location.href = "https://blog.csdn.net/L_PPP"


      27d2335f1da6cadf5b8701810a976c43.jpg


      可以看到,给href属性赋值后,当前页面的URL发生了改变,并发生了相应的页面跳转。同样的其他的属性也是可以进行赋值的,大家可以自行测试一下。


      Location对象的方法


      Location对象一共有3种方法,他们分别是:


      方法 描述
      assign() 加载一个新的页面
      replace() 用新的页面替换当前页面
      reload() 重新加载当前页面


      我们来逐个讲解这三种看似作用相同,却有很大区别的方法吧。


      • assign()


      该方法需要传入一个URL作为参数,调用该方法后,页面会跳转到该URL所在的页面,并且我们可以通过浏览器的回退功能返回上一个页面。


        //调用Location对象的assign()方法location.assign("https://blog.csdn.net/L_PPP")


        我们来看一下动图展示


        1969f700452164eecf6a9e69626e3dba.jpg


        • replace()


        该方法同assign()方法一样,也需要传入一个URL作为参数,调用该方法后,页面会跳转到该URL所在的页面,但是不同的是,该方法调用进行跳转后无法通过浏览器的回退功能返回上一个页面了。


          //调用Location对象的replace()方法location.replace("https://blog.csdn.net/L_PPP")


          我们来看一下动图展示


          dfbc2fc66fefc50f430ef57b804d72c1.jpg


          • reload()


          该方法不需要传入任何的参数,可直接调用。调用该方法,会将当前页面重新加载,就相当于我们按了F5刷新页面。


            //调用了location对象的reload()方法location.reload()


            我们来看一下动图展示


            dfbc2fc66fefc50f430ef57b804d72c1.jpg


            结束语


            好了,这Location对象就了解到这里,希望大家能了解透彻。


            本系列文章之后会写到的核心对象还有最后一个最重要的对象,即window对象,欢迎大家持续关注。

            相关文章
            |
            8月前
            |
            编解码 JavaScript 前端开发
            【Java进阶】详解JavaScript的BOM(浏览器对象模型)
            总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
            257 23
            |
            8月前
            |
            数据采集 JavaScript 前端开发
            浏览器自动化检测对抗:修改navigator.webdriver属性的底层实现
            本文介绍了如何构建一个反检测爬虫以爬取Amazon商品信息。通过使用`undetected-chromedriver`规避自动化检测,修改`navigator.webdriver`属性隐藏痕迹,并结合代理、Cookie和User-Agent技术,实现稳定的数据采集。代码包含浏览器配置、无痕设置、关键词搜索及数据提取等功能,同时提供常见问题解决方法,助你高效应对反爬策略。
            729 1
            |
            存储 缓存 前端开发
            前端谷歌浏览器面版属性
            【8月更文挑战第19天】前端谷歌浏览器面版属性
            242 0
            |
            XML 编解码 JavaScript
            DOM(文档对象模型)和 BOM(浏览器对象模型)
            【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
            1412 62
            |
            Web App开发 JavaScript 前端开发
            JavaScript Window - 浏览器对象模型
            JavaScript Window - 浏览器对象模型
            170 2
            |
            JavaScript 前端开发
            js之浏览器对象|28
            js之浏览器对象|28
            |
            算法 安全 前端开发
            基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
            基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
            453 0
            |
            JavaScript 前端开发 数据处理
            模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
            综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
            307 63
            |
            算法 开发者
            Moment.js库是如何处理不同浏览器的时间戳格式差异的?
            总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
            347 57
            |
            JSON 移动开发 JavaScript
            在浏览器执行js脚本的两种方式
            【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
            222 5
            在浏览器执行js脚本的两种方式