BOM总结

一、BOM概念

　　BOM：Browser Object Model  浏览器对象模型，定义了JS操作浏览器的一些方法和属性

 

二、BOM方法 （在BOM里面大部分的方法都是调用window对象下的方法得到的）

　　1、open(页面的地址url,打开的方式)  方法  打开一个新的窗口（页面）

　　　　(1) 如果url为空，则默认打开一个空白页面；

　　　　(2) 如果打开方式为空，默认为新窗口方式打开；

　　　　(3) 如果不写参数，则以新窗口的方法打开一个空白页面；

　　　 返回值：返回新打开的窗口window对象

　　2、close()  方法  关闭窗口

　　　　(1) ff: 默认无法关闭

　　　　(2) chrome: 默认直接关闭

　　　　(3) ie: 询问用户

 

三、BOM属性

　　1、window.navigator.userAgent :  可以得到当前浏览器的信息

　　2、window.location : 浏览器地址信息

　　　　(1) window.location.href : url   也是浏览器的地址信息

　　　　(2) window.location.search : url?后面的内容

　　　　(3) window.location.hash : url#后面的内容

 

四、BOM 窗口尺寸大小

　　1、可视区的尺寸

　　　　document.documentElement.clientWidth

　　　　document.documentElement.clientHeight

 

　　2、 滚动条滚动距离（存在兼容）

　　　　(1) 其他浏览器均认为是文档的滚动条，因此是文档下的：

　　　　　　document.documentElement.scrollTop[scrollLeft] 

　　　　(2) 谷歌浏览器认为滚动条是body的滚动条，因此是body下的：

　　　　　　document.body.scrollTop[scrollLeft]          

　　　　解决方案：

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

　　

　　3、 内容高 ( 不算边框外里面的内容 )

　　　　oDiv.scrollHeight(Width);

 

　　4、文档高

　　　　document.documentElement.offsetHeight

　　　　如果说获取documentElement的高度，会存在兼容问题，一般我们都是获取body的高度

　　　　document.body.offsetHeight

 

五、BOM 事件

　　1、onscroll : 当滚动条滚动的时候触发

　　　　window.onscroll = function (){  };

 

　　2、onresize : 当窗口大小发生改变的时候触发

　　　　window.onresize = function (){  };