Location对象的作用
Location对象包含着关于当前网页的URL信息,并且可以对URL进行拆分 、读写等各种操作。
Location对象的引用
我们可以通过浏览器的全局对象window来引用Location,像这样window.location
,也可以直接通过 location
来引用Locagtion对象。
window.location === location //返回 true
我们在浏览器的控制台中引用一下Location对象,看看会返回什么
可以看到,返回的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"
可以看到,给href属性赋值后,当前页面的URL发生了改变,并发生了相应的页面跳转。同样的其他的属性也是可以进行赋值的,大家可以自行测试一下。
Location对象的方法
Location对象一共有3种方法,他们分别是:
方法 | 描述 |
assign() | 加载一个新的页面 |
replace() | 用新的页面替换当前页面 |
reload() | 重新加载当前页面 |
我们来逐个讲解这三种看似作用相同,却有很大区别的方法吧。
- assign()
该方法需要传入一个URL作为参数,调用该方法后,页面会跳转到该URL所在的页面,并且我们可以通过浏览器的回退功能返回上一个页面。
//调用Location对象的assign()方法location.assign("https://blog.csdn.net/L_PPP")
我们来看一下动图展示
- replace()
该方法同assign()方法一样,也需要传入一个URL作为参数,调用该方法后,页面会跳转到该URL所在的页面,但是不同的是,该方法调用进行跳转后无法通过浏览器的回退功能返回上一个页面了。
//调用Location对象的replace()方法location.replace("https://blog.csdn.net/L_PPP")
我们来看一下动图展示
- reload()
该方法不需要传入任何的参数,可直接调用。调用该方法,会将当前页面重新加载,就相当于我们按了F5刷新页面。
//调用了location对象的reload()方法location.reload()
我们来看一下动图展示
结束语
好了,这Location对象就了解到这里,希望大家能了解透彻。
本系列文章之后会写到的核心对象还有最后一个最重要的对象,即window对象,欢迎大家持续关注。