BOM，文档宽高及窗口事件

Posted 2020-08-02 冯小漂儿

（一）BOM:Browser Object Model(浏览器对象模型)
页面上所有的变量都是window的属性

一、方法：
1. open（，）
打开一个新窗口（页面）
一参为页面地址url，二参为打开方式
如果url为空，默认打开一个空白页面
如果打开方式为空，默认打开新窗口方式打开
返回值：发挥新打开的窗口的window对象

2. close（，）
关闭窗口，前边对象是谁关闭谁
兼容：（1）火狐ff:默认无法关闭
（2）Chorme：默认直接关闭
（3）ie:询问用户
可以关闭在本窗口中通过js方法打开的新窗口

二、属性：
1. window.navigator.userAgent ==>浏览器信息（可用于不同浏览器采取不同的措施）

2. window.location ==>浏览器地址信息，返回object对象
因此其下还有属性：
window.location.href ==>地址栏的地址
window.location.search ==>url中？之后的内容（包括？）
window.location.hash ==>url中#之后的内容（包括#）

（二）文档的宽高
1. document.documentElement.clientWidth[Height] ==>可视区宽高（因为document无宽高，所以加上documentElement

，其中document.documentElement可换成任何有宽高属性的元素，下同）
document.documentElement.scrollTop[Left] ==>滚动条滚动距离（有兼容chrome认为滚动按钮算作在body里）
兼容处理：
var ScrollTop=document.documentElement.scrollTop||document.body.scrollTop;

2. 盒子元素.scrollHeight[Width] ==>盒子内容宽高

3. document.documentElement.offsetWidth[Height] ==>文档可视宽高

（三）窗口事件
onscroll ==>当滚动条滚动时触发
onreset ==>当窗口大小发生改变时触发
注：这两个事件的触发是按时间间隔计算，改变速度快，触发次数少，改变速度慢，触发事件的次数多
eg:var i=0;
window.onscroll=function(){
document.title=i++;
}