前序文章,我们已经将window涉及到的大部分知识点进行梳理。同样的方式,我们将BOM当中其他的对象,也逐一拎出来盘一盘。
随手画了个思维导图,嗯,看起来还不错,花花绿绿的,但是好像看不懂。看不懂就对了,思维导图本来就是整理思维用的。从思维导图上看,似乎BOM的知识点并不多,那我们来好好聊聊“window对象”以外的“BOM对象”吧。
location对象
location,英语翻译为“位置、地址”。作者对他的解释:它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。
导航?可以自动驾驶吗?哈哈,这里可不是开车,这里指的是url的路由。
所以location的作用在于提供了当前窗口的信息。
先来看看location能提供哪些属性和功能吧。
这些当中,对于每个项目的不同,不同属性的使用程度也不大相同。location.search是我遇到最多的属性。通过这个属性我们能够获取到页面携带的参数信息,例如“
?name=Jack&age=20
”,通过search
可以取得name
的值为Jack
,age
的值为20
。location提供的导航功能,能够通过重新赋值当前的属性来重新刷新数据。
可以通过每次重新赋值(除了
hash
)以上的属性,让URL重新加载,这样就能够达到导航功能了。案例:
location.pathname = "/will/"
。这样页面就可以刷新了。我们再使用浏览器的时候,有没有注意到浏览器上面有“前进”、“后退”按钮,你如果通过上面介绍的方式直接重新赋值属性,是可以直接使用前进后退的功能的。但种有那么一种情况,页面设计不愿意让你有返回之前页面的功能,所以就有如下代码。
location.replace(url)
通过这种方法跳转,是无法“后退”页面的。
那如果页面没有变化,可是有希望能够让页面重新刷新,该怎么办呢?
location.reload()
部分数据从缓存中加载location.reload(true)
从服务器中加载
navigator对象
navigator对象的作用是为了识别当前浏览器。所以他能够知道当前使用的浏览器版本号是多少,当前浏览器是否已经联网,以及当前浏览器是在什么系统下使用的。
在应用场景中,我们经常需要判断当前使用的是什么浏览器来解决兼容问题,这就需要通过navigator.appName
来获取完整的浏览器名称。
具体可以查看思维导图当中的navigator分支。我只列举了比较常见的属性,如果有特殊需求,还是希望能够阅读开发文档。
screen对象
这个对象相对来讲使用的频率会更小些。他主要用来表明客户端的能力。也就是说,这些数据只能读取,不能赋值修改。
我们比较常使用的是:
screen.availHeight
屏幕像素高度-系统部件高度(最大显示高度)
screen.availWidth
屏幕像素宽度-系统部件宽度(最大显示宽度)
history对象
历史对象,顾名思义就是获得浏览的历史记录。还记得我们前面讲到的location对象吗。history的作用需要建立在location的导航功能之上。
最常用的就是“前进一页”和“后退一页”。
history.go(1)
前进一页
history.go(-1)
后退一页
其他的跳转方式可以参考开发文档。这部分常用,且不难理解。
总结
全面深层地理解了BOM。