bom的基础知识

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():这两个方法可以说是一组方法,前面是设定指定的时间 周期调用某个函数,而后面的方法则是清除前面的设定。

猜你喜欢

转载自www.cnblogs.com/wwjljwx/p/11223210.html