关于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++; }
如果大家有不同意见,不要只是点反对,欢迎评论指正,不然我不知道哪里有问题额。。。。。。