BOM,文档宽高及窗口事件小析

(一)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++;
}

posted @ 2016-07-01 21:41  冯小漂儿  阅读(159)  评论(0编辑  收藏  举报