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

            相关文章
            |
            2月前
            |
            前端开发 JavaScript 开发者
            什么是浏览器对象的 preventDefault 方法
            什么是浏览器对象的 preventDefault 方法
            30 1
            |
            2月前
            |
            JavaScript 前端开发 UED
            浏览器对象模型 (BOM)
            浏览器对象模型(Browser Object Model,简称BOM)是JavaScript中用于操作浏览器窗口和与其相关对象的一种模型。BOM提供了一系列与浏览器窗口进行交互的对象,使得JavaScript可以对浏览器窗口进行控制和操作。其中最核心的对象是window对象,它代表了浏览器窗口本身。
            17 1
            |
            3月前
            |
            Web App开发 前端开发
            Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
            Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
            154 0
            |
            15天前
            |
            JavaScript
            【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
            【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
            |
            20天前
            |
            存储 JavaScript 前端开发
            在浏览器中存储数组和对象(js的问题)
            在浏览器中存储数组和对象(js的问题)
            |
            3月前
            |
            JavaScript 前端开发 API
            探索前端BOM API:解锁浏览器的潜力
            探索前端BOM API:解锁浏览器的潜力
            44 0
            |
            4月前
            |
            Web App开发 移动开发 JavaScript
            【Vue版】实现拖拽、排序效果(注意,这个方法在chrome谷歌浏览器上面不适用,dragend会情不自禁触发drag事件先执行,有点像浏览器的一个bug)
            【Vue版】实现拖拽、排序效果(注意,这个方法在chrome谷歌浏览器上面不适用,dragend会情不自禁触发drag事件先执行,有点像浏览器的一个bug)
            |
            4月前
            |
            编解码 JavaScript 前端开发
            BOM和DOM:BOM(浏览器对象模型)提供了与浏览器交互的能力,如弹窗、定时器等;DOM(文档对象模型)提供了操作HTML元素的能力,如获取、修改元素内容和属性。
            BOM和DOM:BOM(浏览器对象模型)提供了与浏览器交互的能力,如弹窗、定时器等;DOM(文档对象模型)提供了操作HTML元素的能力,如获取、修改元素内容和属性。
            38 2
            |
            6月前
            |
            Web App开发 前端开发 JavaScript
            |
            1月前
            |
            存储 机器人
            在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
            【2月更文挑战第28天】在阿里云RPA中,你可以通过以下步骤来更改默认唤醒IE浏览器的地址
            19 1

            热门文章

            最新文章