浏览器中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对象,欢迎大家持续关注。

            相关文章
            |
            3月前
            |
            存储 人工智能 前端开发
            前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
            本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
            225 14
            |
            3月前
            |
            XML 编解码 JavaScript
            DOM(文档对象模型)和 BOM(浏览器对象模型)
            【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
            |
            3月前
            |
            Web App开发 JavaScript 前端开发
            JavaScript Window - 浏览器对象模型
            JavaScript Window - 浏览器对象模型
            31 2
            |
            3月前
            |
            算法 安全 前端开发
            基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
            基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
            123 0
            |
            4月前
            |
            JavaScript 前端开发
            js之浏览器对象|28
            js之浏览器对象|28
            |
            5月前
            |
            API UED 开发者
            如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
            【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
            97 0
            |
            2月前
            |
            JSON 移动开发 JavaScript
            在浏览器执行js脚本的两种方式
            【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
            在浏览器执行js脚本的两种方式
            |
            2月前
            |
            JavaScript 前端开发 数据处理
            模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
            综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
            |
            2月前
            |
            算法 开发者
            Moment.js库是如何处理不同浏览器的时间戳格式差异的?
            总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
            53 1
            |
            2月前
            |
            机器学习/深度学习 自然语言处理 前端开发
            前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
            本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
            200 1