10分钟回顾Location对象的几个知识点

Location对象包含有关当前URL的信息.它是Window对象的一部分,可经过window.location属性来访问.

个人页面路径是 http://127.0.0.1:5501/html/index.html?id=123#test,在控制台键入window.location,返回一个Location对象.

这其中有些是属性,有些是方法,咱们来简单了解一下.

对象属性

咱们按照上图中展开的Location对象,来讲一说其中的一些属性

属性	描述
hash	锚点部分,以#开头
host	主机名 + 端口号
hostname	主机名 如127.0.0.1 localhost 等
href	包含完整URL
origin	协议 + 主机名 + 端口号(咱们常说的跨域,跨的就是它)
pathname	路径部分,以 / 开头
port	端口,常见的80 443等
protocol	URL对应的协议,注意最后是有一个:的,如http: https: 等
search	参数部分,以? 开头

下面这个是一个在MDN上的例子,比较清晰直观的展现了各个部分的内容:

其中上面的属性,除了 origin 是个只读属性不可修改外,其他的属性都是读写兼备的. 下面是属性如何获取和设置的用法

console.log(window.location.hash)  // 读取当前页面的hash 结果为 #test
window.location.hash = 'test2' // 设置当前页面的hash 此时能够观察到浏览器的url会变化
console.log(window.location.hash) // 再次读取hash,结果变成了 #test2
window.location.href = 'https://www.baidu.com'  // 页面直接跳转到百度
复制代码

在这里顺便提一下,如今大部分的浏览器都支持 hashchange 事件.就是当浏览器# 后面的内容变化时,触发此事件.

window.addEventListener('hashchange', () => {
	console.log('Hash has changed')
})
复制代码

执行上面的代码后,当咱们改变url的hash部分时,控制台就会打印出提示.固然,对于那些不兼容hashchange事件的浏览器,也是有办法能够模拟的,好比设置一个定时器,每隔必定时间去查询当前的hash,和以前的hash去作对比从而判断url中的hash是否改变了.

补充案例

曾经项目中有一个需求是这样的,点击按钮复制一个带有我的邀请码的注册连接.如这种样子的:https://www.xx.com/register?code=8888.那么这个连接就须要咱们本身去拼接了.我原先伪代码以下

let inviteCode = 8888
let url = location.origin + '/register?code' + inviteCode
copy(url)
复制代码

可是后来测试同窗在兼容性测试的时候告诉我这里有问题,在IE11如下的浏览器中复制出来的路径是有问题的.因而,我去排查缘由,发现location.origin 这个属性在IE10及其如下是不存在的,会返回undefined,既然发现了问题所在,那咱们就好解决了.解决代码以下:

if(!location.origin){
    location.origin = location.protocol + '//' + location.hostname + (location.port ? ':'+location.port : '') 
}
let inviteCode = 8888
let url = location.origin + '/register?code' + inviteCode
copy(url)
复制代码

提交代码,因而测试同窗高兴的告诉我说问题解决了.

对象方法

从文章最开头的图中能够看到 Location 对象有3个方法 (toString方法就不说了,就是返回一个包含完整url的字符串)

方法	描述
assign	加载新页面
reload	重加载当前页面
replace	用一个新页面代替当前页面

这里来讲明一下这几个方法的用法和区别.首先咱们说的是reload方法.此方法的参数是一个可选的布尔类型,不填默认为false,表示从缓存中读取当前页面刷新,至关于普通的F5刷新,true表示强制浏览器从服务器去从新获取页面资源,至关于强制刷新(Shift+F5 或者 Cmd+Shift+R),具体用法以下:

window.location.reload()  // 执行后会从新加载当前页面
复制代码

而后是 assign 和 replace 方法,这两个方法都须要传入一个参数,表示新页面的地址.它们的区别在于,使用了 assign 后,会在浏览器的历史记录中留下以前老页面的地址,当咱们在新页面点击回退键的时候还能够回到以前的页面.而 replace 则是使用新页面的地址替换老页面的地址,此时再点击回退按钮就回不到咱们以前的页面去了.你们能够新开一个空白页面,而后分别将下面的代码放到控制台去执行一下,再以后点击浏览器左上角的回退按钮,观察效果.

// 新开两个空白页,各执行其中一句代码
window.location.assign('https://www.baidu.com')
window.location.replace('https://www.baidu.com')
复制代码

在MDN中提到,Location 实际上是一个接口,表示连接到的对象的URL.Document 和 Window 接口都有这样一个连接的Location.因此咱们能够经过document.location 或 window.location 来访问 Location 对象.甚至于location 都是一个全局变量.咱们直接在控制台键入 location 也会返回一个 Location 对象

meta属性实现刷新和跳转

其实当咱们想要实现页面的跳转或者每隔一段时间刷新当前页面,不必定非得使用定时器+location方法.咱们还可使用meta属性来达到相同的效果.假如我这是一个监控页面,想要每隔20秒刷新一次页面.使用定时器的方法代码以下:

setTimeout(() => {
	window.location.reload()
},20000)
复制代码

而使用meta标签则只须要

<meta http-equiv="refresh" content="20"/>
复制代码

又假如这是一个简单的介绍页,在10s后差很少就要自动跳到其余页面.咱们也可使用上面的meta属性.只须要在content里面时间的后面加上跳转的地址就能够了,等时间到了它就会自动跳转.

<meta http-equiv="refresh" content="10;https://www.baidu.com"/>
复制代码

固然使用meta有一个很差的地方就是它的刷新和跳转是不可中途取消的.所以它的使用场景要视具体的业务而定.好比一个须要权限的页面被非法访问,那么就能够控制必定时间后自动跳到其余页面去.

获取url中的查询字符串

不少时候,咱们有这样的需求,就是获取url查询字符串中某个key对应的value.好比在一个如 http://127.0.0.1:5501/html/index.html?id=123&name=zhangsan 的页面中获取id对应的值,也就是123.那么咱们也有很多方法能够来作这个事情.

传统的方法:

function getUrlQuery(){
  let url = window.location.search
  let obj = Object.create(null)
  if(url.includes('?')){
    let str = url.substr(1)
    let strs = str.split('&')
    for(let i = 0;i < strs.length;i++){
      obj[strs[i].split('=')[0]] = strs[i].split('=')[1]
    }
  }
  return obj
}
复制代码

使用 URLSearchParams 接口:

const urlParams = new URLSearchParams(window.location.search)
console.log(urlParams.get('id'))  // 123
复制代码

URLSearchParams 接口定义了一些实用的方法来处理URL中的查询字符串.这里是它的具体介绍,有兴趣的同窗能够本身去看看,咱们就先不展开了.

总结

其实对于 Location 对象,它的知识相对而言并非不少.在红宝书中也只有短短的3页内容.做为BOM中的一部分,它经常也会和 Navigator, History对象一块儿提到,这部份内容咱们后面有时间再说好了.