「这是我参与11月更文挑战的第 11 天,活动详情查看:2021最后一次更文挑战」
浏览器对象模型(BOM,Browser Object Model)是以 window 对象为基础的,这个对象代表了浏 览器窗口和页面可见的区域。window 对象也被复用为 ES 的 global 对象,因此所有全局变量和函数都是它的属性,而且所有原生类型的构造函数和普通函数也都从一开始就存在于这个对象之 上
history 对象
history 对象表示当前窗口,自使用以来用户的导航历史记录。这个 history 是 window 的属性,因此每个页面都会有单独的一个 history 对象,并且处于安全考虑,history 不会暴露用户访问过的 url,但可以在不知道 url 的情况下,进行前进后退
go()
在用户当前页面的历史记录中,可以使用 go(n) 的方式控制当前页前进或者后退
// 后退一页
history.go(-1);
// 前进一页
history.go(1);
// 前进两页
history.go(2);
go()有两个简化的方法:
back()模拟了浏览器的后退按钮,即为go(-1)forward()模拟了浏览器的前进按钮,即为go(1)
history 中还有一个 length 属性,表示当前的历史记录中,有多少个 url。
不过,在现在异步加载页面的大环境下,history 的操纵浏览器历史记录的场景不算很多。以我经历的项目来说,管理系统中,标准的左侧菜单栏,上方工具栏,右方主要数据展示,在交互的过程中,都是以异步的方式将新的页面嵌入到右方的面板中
screen 对象
这个可以说是 window 对象中最冷门的对象。这个对象仅仅用来存储客户端能力的相关信息,如用户当前屏幕(pc端通常为显示器)的像素长宽等
availHeight/availWidth
屏幕上可用的像素高度/宽度,常规来说,值应该是我们整块屏幕的像素,例如 1920x1080 这种,那么 availHeight=1920,availWidth=1080
但实际上,需要减去任务栏等系统组件所占用的尺寸
height/width
这里的长宽就是屏幕的可视大小
pixelDepth
指屏幕的颜色分辨率(比特每像素),一个像素所能表达的不同颜色数取决于比特每像素(BPP)。
8 bpp [28=256;(256色)];
16 bpp [216=65536; (65,536色,称为高彩色)];
24 bpp [224=16777216; (16,777,216色,称为真彩色)];
48 bpp [248=281474976710656;(281,474,976,710,656色,用于很多专业的扫描仪)