BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少规范,每个浏览器提供商又按照自己的想法去扩展它,那么浏览器共有的对象就成了事实的标准,所以,BOM本身是没有标准的或者说是还没有哪个组织去为它制定标准。
本文我们主要来看BOM中的核心对象:Window对象
Window对象是BOM的核心对象,它表示浏览器的一个实例。Window对象处于JavaScript结构的最顶层(如下图所示),对于每个打开的窗口,系统都会自动为其定义window对象。
1 对象的属性和方法
Window对象有一系列的属性,这些属性本身也是对象。Window对象下的属性和方法,可以使用window.属性和window.方法()或者直接属性和方法()的方式调用。举个例子:window.alert()和alert()是一样的意思。
由于window对象的属性和方法较多,这里不再一一列举。大家自己可以查阅文档资料。
2系统对话框
浏览器是通过alert()、confirm()和prompt()方法来调用系统对话框向用户显示信息的。系统对话框与浏览器中显示的网页没有关系,也不包含HTML。
举个简单的输入提示框的例子:
<span style="font-size:18px;">var num=prompt('请输入第一个数字',0); var num1=prompt('请输入第二个数字',0); var num2= Number(num)+Number(num1); alert('两个数字的和是:'+ num2); </span>
当然还有其他的提示框,比如调用系统的打印、查找对话框等等,还可以对浏览器的状态栏的初始值进行设置。
3新建窗口
使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口,它可以接受四个参数:1.要加载的URL;2.窗口的名称或者窗口目标;3.一个特定的字符串;4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。
举个例子说明一下如何使用
<span style="font-size:18px;">open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');</span>
4间歇调用和超时调用
JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来控制代码在特定的时刻执行。前者在指定的时间过后执行代码,而后者则是每隔指定的时间就执行一次。
超时调用需要使用window对象的setTimeout()方法,它接受两个参数:要执行的代码和毫秒数的超时时间。调用setTimeout()方法之后,该方法会返回一个数值ID,表示超时调用。这个超时调用的ID是计划执行代码的唯一标识,可以通过它来取消超时调用。
要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
间歇调用和超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval(),它接受的参数与setTimeout()相同。
取消间歇调用方法和取消超时调用类似,使用clearInterval()方法。但取消间歇调用的重要性远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面关闭。
一般认为,使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下,很少使用真正的间歇调用,因为需要根据情况来取消ID,并且可能会造成同步的一些问题,因此不建议使用间歇调用。下面我们使用js写一个5秒的定时器:
<span style="font-size:18px;">var num=0; var max=5; function timer(){ //声明一个定时器 num++; if(num==max){ alert('5秒后结束!'); }else{ setTimeout(timer,1000); } } setTimeout(timer,1000); //执行定时器</span>
至此,对于BOM的window对象就介绍完了,没有什么高深的东西和牛逼的技巧,都是基础的东西,但是这是我们的必经之路,万丈高楼平地起!