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

            相关文章
            |
            4月前
            |
            存储 缓存 前端开发
            前端谷歌浏览器面版属性
            【8月更文挑战第19天】前端谷歌浏览器面版属性
            48 0
            |
            2月前
            |
            XML 编解码 JavaScript
            DOM(文档对象模型)和 BOM(浏览器对象模型)
            【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
            |
            2月前
            |
            Web App开发 JavaScript 前端开发
            JavaScript Window - 浏览器对象模型
            JavaScript Window - 浏览器对象模型
            23 2
            |
            2月前
            |
            算法 安全 前端开发
            基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
            基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
            89 0
            |
            3月前
            |
            JavaScript 前端开发
            js之浏览器对象|28
            js之浏览器对象|28
            |
            4月前
            |
            JavaScript 前端开发
            JavaScript BOM 的概念(浏览器对象模型)
            JavaScript BOM 的概念(浏览器对象模型)
            52 1
            |
            4月前
            |
            JavaScript UED
            js之探索浏览器对象模型
            js之探索浏览器对象模型
            55 0
            |
            26天前
            |
            JSON 移动开发 JavaScript
            在浏览器执行js脚本的两种方式
            【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
            在浏览器执行js脚本的两种方式
            |
            23天前
            |
            机器学习/深度学习 自然语言处理 前端开发
            前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
            本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
            |
            2月前
            |
            机器学习/深度学习 自然语言处理 前端开发
            前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
            除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
            507 1