BOM
window对象
全局作用域
在全局作用域中声明的变量、函数都会变成window对象的属性和方法
窗口与框架
因为window是浏览器的一个实例,如果页面中包含框架,则每个框架都有自己的window对象,保存在frames集合中,可以使用window.frames[i]或top.framesi引用这些框架,或者使用parent引用上一层框架。
self对象始终指向window
因为在框架下,每个框架下定义的全局变量都会变成框架中window对象的属性,每个框架又都有自己的构造函数,因此有可能各构造函数并不相等,所以框架传递的对象使用instanceof可能结果不同。
窗口位置
-
screenLeft和screenTop(浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的距离)分别表示窗口相对于屏幕左边和上边的位置(IE、Safari、Opera、Chrome),并且是从屏幕左边和上边到又window对象表示的页面可见区域的距离。
-
screenX和screenY与上面的一样(Firefox)。保存的是整个浏览器窗口相对于屏幕的坐标值,即在窗口的y轴坐标为0是返回0。因此可以封装使用:
var left = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX
var top = (typeof window.screenTop == 'number')?window.screenTop:window.screenY
- 而且Firefox,S,和Chrome始址返回页面中的top的screenX或screenY只。但是IE和Opera则会返回框架相对于屏幕边界的精确坐标。
- 使用moveTo()接收新位置的x和y值,moveBy()接收水平和垂直方向上移动的像素数,来将窗口移动。
窗口大小
- innerWidth和innerHeight,Opera中,这两个值表示容器中页面视图区的大小。而Chrome表示视口大小而非浏览器窗口大小
- innerHeight :浏览器窗口高度,如果存在水平滚动条,则包括滚动条。innerWidth同理
- outerWidth和outerHeight,在IE、Safari和Firefox中,表示浏览器窗口本身大小。而在Opera中表示页面视图容器大小。
- outerHeight:浏览器窗口整个高度,包括窗口标题、工具栏、状态栏等。outerWidht同理
- clientWidth和clientHeight保存了页面视口大小。但是在不同浏览器中的不同模式下,获取的方法不同。
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
-
而且 document.documentElement度量布局视口 不包括整个文档的滚动条,但包括元素的边框
-
document.body.clientHeight不包括整个文档的滚动条,也不包括元素的边框,也不包括的边框和滚动条
-
使用resizeTo()和resizeBy()调整浏览器窗口大小。resizeTo接收新高度和宽度,而后者接收新窗口与原窗口宽度和高度之差
上面各个度量图示如下:
定时器
- setTimeout(function(){},1000),规定只第二个参数长的时间后执行一个
setTimeout的第二个参数规定多长时间吧当前任务添加到任务队列中,如果队列为空,添加的立刻执行。不为空就等前面的代码执行完再执行。调用该方法返回一个ID,可以通过该ID取消超时调用clear
Timeout(ID) - setInterval(function(){},1000),规定每间隔第二个参数长的时间执行一次,并且使用完后一定要清楚定时器,在使用之前可以检测是否存在定时器,先做清楚,然后再调用定时器。否则该定时器会一直在执行到一面卸载
location对象
既是document的对象属性也是window的对象属性
screen对象
- avaliHeight:浏览器窗口在屏幕上可占用的垂直空间,即最大高度
- avaliWidht:返回浏览器窗口可占用的水平宽度
- height:屏幕的像素高度
- width:屏幕的像素宽度
- top:当前屏幕距离上边的像素距离
- left:当前屏幕距离左边的像素距离
history对象
- history.go()—在用户的历史纪录中任意跳转
- back()后退
- forward()前进