关于BOM

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

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

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

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

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

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

?

1 2 3 4 5

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

BOM常用属性

?

1 2 3 4 5

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文档元素）

?

1	document.documentElement.clientWidth/clientHeight

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

?

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

 

兼容处理，以scrollTop为例：

 

?

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

 

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

?

1	document.body.scrollHeight(width)

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

?

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

var  i =0;   window.onscroll = function(){       document.title = i++;   }   window.onresize = function(){       document.title = i++;   }

 

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