BOM基本介绍
BOM中大致存在如下几个对象:
•window:表示窗口对象
•navigator:包含浏览器相关信息
•location:包含当前页面的位置信息
•history :包含用户访问页面的历史信息
•screen:包含客户端显示能力信息
•document:表示整个页面
screen 对象
height :屏幕的像素高度
width:屏幕的像素宽度
availHeight:屏幕的像素高度减去系统部件高度之后的值(只读)
availWidth:屏幕的像素宽度减去系统部件宽度之后的值(只读)
left:当前屏幕距左边的像素距离[firefox返回0, chrome和IE不支持]
top:当前屏幕距上方的像素距离[firefox返回0, chrome和IE不支持]
availLeft:未被系统部件占用的最左侧的像素值(只读)[chrome和firefox返回0, I E不支持]
availTop:未被系统部件占用的最上方的像素值(只读)[chrome和firefox返回0, I E不支持]
bufferDepth:读、写用于呈现屏外位图的位数[IE返回0, chrome和firefox不支持]
colorDepth:用于表现颜色的位数(只读)[IE8-返回32,其他浏览器返回24]
pixelDepth:屏幕的位深(只读)[IE8 -不支持,其他浏览器返回24]
deviceXDPI:屏幕实际的水平DPI(只读)[IE返回96, chrome和firefox不支持]
deviceYDPI:屏幕实际的垂直DPI(只读)[IE返回96, chrome和firefox不支持]
logicalXDPI:屏幕逻辑的水平DPI(只读)[IE返回96, chrome和firefox不支持]
logicalYDPI:屏幕逻辑的垂直DPI(只读)[IE返回96, chrome和firefox不支持]
updateInterval:读、写以毫秒表示的屏幕刷新时间间隔[IE返回0, chrome和firefox不 支持]
fontSmoothingEnab:是否启用了字体平滑(只读)[IE返回true, chrome和firefox不支持]
history对象
常见属性
lenght:返回浏览器历史列表中URL的数量
常见方法:
back:加载history列表中的前一个URL
forward:加载history列表中的下一^ URL
go:加载history列表中的某个具体页面
window.history.go:方法可以用来导航到指定的页面,0代表是当前页面
window.histo ry.fo rwa rd():向前一个页面
window.histo ry.back():回退一个页面
window 对象
window对象基本介绍:
浏览器每打开一个窗口,就包含了一个window对象。window对 象是整个BOM的核心对象,它代表着一个浏览器窗口的实例。
window对象扮演着在ES中的globa I对象的角色,因此所有在全局作用域中声明的变量以及函数 都会成为该对象的属性和方法。也就是说全局变量是window对象的属性,全局函数是window对 象的方法。
全局属性和window属性的区别:var和window对象的属性真的就是一模一样么?
也不是,还是有稍微不同的地方,那就是不能使用delete操作符删除用var声明的变量,但是如 果是window的属性就可以使用delete操作符来进行删除。
let以及const所声明的变量:还需要注意的是,使用ES6新提供的let和const所声明的变量不会成为window对象的属性
常见属性:
窗口大小:inne rWidth , inne rHeight 以及 oute rWidth , oute rHeight 区别在于:inner那一组表示的是页面视图区的大小,而outer那一组表示的是浏览器窗口本身的;不同的浏览器,所表示的值略微有差异。
我们除了通过inne rWidth , inne rHeight来获取页面视图区的大小以外,还可以通 过 document.documentElement.clientWidth 以
及document.documentElement.clientHeight来获取页面视图区的大小,
窗口位置:.窗口位置的属性也是有两组,分别是scr eenLeft和scr eenTop,还有scr eenX和scr eenY
这两组属性都是表示窗口相对于屏幕左边和上边的位置
区别在于screenX和screen Y属性最早是火狐浏览器里面特有的属性。但是上面的代码是在谷歌浏 览器里面运行的,可以看到,现在这两组属性在很多浏览器里面都是通用的了。接下来我将上面 两组属性的区别总结成下面的表格
元素位置:我们可以通 过offsetLeft以及offsetTop来得到一个元素在页面中的位置,位置的信息是不带单位的,
元素大小:除了获取到一^元素在页面中的位置,我们还可以通过offsetwidth和offsetHeight来得到
—个元素的宽高,
滚动位置:通过pageXOffset和pageYOffset属性我们可以获取文档在窗口左上角水平和垂直方向滚动的 像素
常用方法
1.系统提示框:
ale rt():用于显示带有一条指定消息和一个确定按钮的警告框。
注意:alert会终止JavaScript代码的执行
打开和:
open()方法:使用window.open()方法,该方法有4个参数,
需要注意现在的浏览器一般都是会阻止弹窗的。一般需要我们点击允许弹出后,才弹出2.htm I页 面
在调用了 window对象的open()方法以后,他会返回一个对象,可以调用这些对象的方法,其 中就有一个close()方法,
还有一个opener属性,保存着打开它的原始窗口对象
5.定时函数:
间歇调用:
setInterval()与clearInterval():这两个方法可以说是一组方法,前面是设定指定的时间 周期调用某个函数,而后面的方法则是清除前面的设定。