《Web前端开发》第14章 BOM.pptx

;浏览器对象模型BOM（BrowserObjectModel）用于操作浏览器，例如弹出窗口、刷新页面、后退、前进等。BOM提供了常用的对象包括window对象、screen对象、location对象、navigator对象等。由于BOM由各个浏览器推出，所以没有统一标准，不同浏览器支持的对象成员略有差别。;window是浏览器的顶级对象，表示浏览器的一个实例，甚至DOM的document对象也是window对象的属性。;14.2.2常用成员

1.属性

window对象常用属性如表14-1所示。;2.方法

window对象常用方法如表14-2所示。;3.事件

window常用事件包括onload、unload、onscroll、onresize等，分别在页面加载完成后、页面卸载完成后、页面滚动、页面大小变化时触发。

onload()事件可用于初始化，而且有些JavaScript代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免类似情况的发生，可以使用以下两种方式。;（1）将JavaScript代码放在页面底部，例如将box背景颜色设置为红色，代码如下。;（2）通过window.onload来执行代码，则可以将如下代码放在head中。

script

window.onload=function(){

letbox=document.getElementById(box);

box.style.backgroundColor=red;

}

/script;【例14-1】实现瀑布流布局。页面加载时效果如图14-1（a）；滚动页面时，动态加载图片列表里面的图片，依次将下一幅排列到高度最小的那一列，如图14-1（b）所示;14.2.3定时器

定时器常用于动画效果，浏览器提供了两种定时器：setTimeout()可以实现在一定时间之后执行一次某段代码，而setInerval()可以按照指定周期来重复执行某段代码。clearInterval()和clearTimeout()则用于清除定时器，如表14-3所示。;1.setTimeout()和clearTimeout()

（1）通过setTimeout(函数名,时间)的方式，到达指定时间时，调用一次函数。setTimeout()返回值为定时器唯一ID，可以作为clearTimeout()参数来清除定时器。例如。

//3秒后调用sayHello，显示信息，只显示一次

letsayHelloTimer=setTimeout(sayHello,3000);

functionsayHello(){

alert(HelloWorld);

}

//取消定时器的执行

clearTimeout(sayHelloTimer);

（2）setTimeout()第一个参数只被执行一次，通常是匿名函数。例如。

lettimerId=setTimeout(function(){

alert(HelloWorld);

},3000);;2.setInterval()和clearInterval()

setInterval()用于每隔指定时间执行一次某段代码，clearInterval()用于取消由setInterval()设置的定时器。;14.2其他对象;14.2.2location对象

location对象包含当前页面URL信息，常见成员及其作用如表14-4所示。其中页面URL如下。

:8080#uid=1000;14.2.3navigator对象

navigator对象包含了浏览器的相关信息，比如浏览器的名称、版本、操作系统等，userAgent属性可以返回这些信息。例如想针对IE10以下的浏览器做特殊处理，代码如下。

if(navigator.userAgent.indexOf(MSIE)-1){

……

};14.2.4history对象

history对象包含浏览历史URL的相关信息，其常用成员如表14-5所示。