关于BOM

BOM:浏览器对象模型 (Browser Object Model)主要定义的是JS操作浏览器的方法和属性。 大部分方法都在window下。

常用方法:(JS里面规定如果方法前面是window,window可以省略不写。)

open(地址url,打开的方式) :打开一个新的窗口,并返回新打开窗口的window对象。如果参数为空 默认为打开空白页面,默认为新窗口方式打开。

返回值:返回新打开的窗口的window对象。window.open();

close():关闭窗口,存在兼容问题,火狐下没反应, IE会询问是否确认关闭,谷歌直接关闭关闭时提示问题,不过这个属性并不常用。

可以关闭在本窗口中通过open方法打开的新窗口。 如下:

//实现 在本页面中打开一个新窗口,并点击本页面的一个按钮,再把新窗口关掉
opener = window.open(); //返回的新窗口对象
var btn.onclick = function(){
     opener.close();
}

BOM常用属性

window.navigator.userAgent:浏览器的信息,比如版本号等
window.location:存放关于浏览器地址的一些信息,本身是一个对象,下面有方法和属性 。如下
   window.location.href :浏览器具体地址 比如http://i.cnblogs.com/EditPosts.aspx?opt=1#123
   window.location.search:地址栏问号后的信息,包括问号(?opt=1)
   window.location.hash:地址栏#后的信息,包括#号。(#123)

文档可视区大小(指的是你视野范围可以看到的大小,不是实际大小。document是文档对象,documentElement文档元素

document.documentElement.clientWidth/clientHeight

滚动距离(可视区的顶部到页面实际的顶部的距离,其实就是滚动出去的距离,有兼容问题)

document.documentElement.scrollTop/scrollLeft:其他浏览器
document.body.scrollTop/scrollLeft  :谷歌认为是body的而不是文档

 

兼容处理,以scrollTop为例:

 

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

 

文档实际的内容高度(包括超过父元素或者超出被隐藏的内容高度,padding+width)

document.body.scrollHeight(width)  

文档对象内容的高度,包括body的margin+padding+width+border。

document.documentElement.offsetHeight(IE下有问题,它认为这个和可视区的高一样)
document.body.offsetHeight(推荐用这个)不包括body的margin.

 window对象常用事件(事件触发次数是按时间间隔来算的,并不是你手动的频率

onscroll :当滚动条滚动的时候触发
onresize :当窗口发生改变的时候触发

var  i =0;

window.onscroll = function(){

    document.title = i++;

} 

window.onresize = function(){

    document.title = i++;

} 

 

如果大家有不同意见,不要只是点反对,欢迎评论指正,不然我不知道哪里有问题额。。。。。。

posted @ 2016-07-08 09:51  全凭一口仙气儿活着  阅读(886)  评论(0编辑  收藏  举报