BOM即为浏览器对象模型。BOM提供了很多对象,用于访问浏览器的功能,这些功能与网页无关。
1,window对象
BOM的核心便是window对象,表示浏览器的一个实例。
1.1 全局作用域
window对象既是js访问浏览器功能的接口,但同时它也是js中的一个Global对象。也正因此,在js全局作用域中声明的属性、函数等也是window对象的属性和函数。
eg:var age = 20;
window.count = 20;
alert(age);//20
alert(window.age);//20
上例中,使用js在全局作用域中声明了一个变量age,它同时也会被转为window对象的属性,所以也可以使用window对象访问该属性。二者的区别在于:如果是在window对象上显式声明该属性,则可以使用delete操作符删除该属性;而在全局作用域中声明的属性则不能通过delete操作符进行删除。
eg:delete window.age; // 返回false,无法删除
delete window.count; // 返回true,正确删除
1.2 窗口关系及框架
如果一个页面包含有框架,则每个框架都用于自己的window对象,这些对象保存在frames集合中,可以使用索引值(从0开始,从上到下、从左至右)和框架名称(name属性)来获取特定的window对象。
eg:
<html>
<head>frames test</head>
<frameset>
<frame src="" name="top">
<frameset>
<frame src="" name="left">
<frame src="" name="right">
</frameset>
</frameset>
</html>
上例中创建了一个框架集,可以通过window.frames[1]或者window.frames["left"]来访问name="left"的window对象。
1.2.1 top对象
top的含义应该是说浏览器直接包含的那一个页面对象,也就是说如果你有一个页面被其他页面以iframe的方式包含了,无论包含的层级是什么,都可以用top访问最外层的哪一个页面,因为这个页面被浏览器直接包含。通俗的说,top对象就是最外层的窗口,所以还可以通过top对象访问其他窗口的window对象。需要注意的是,除非浏览器窗口是通过window.open()方法打开的,否则浏览器窗口的name属性不会包含任何值。
eg:var left = top.frames[1];
1.2.2 parent对象
parent用于在iframe,frame中生成的子页面中访问父页面的对象,也就是当前页面的上一层页面。在没有框架的情况下,parent和top相同。
1.3 导航和打开窗口
使用window.open()方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。该方法接受4个参数:
@URL:要加载的路径
@窗口目标:即打开窗口的位置,可选项有{_self,_parent,_blank,_top}或者页面框架中某个框架的名称
@一个特性字符串:用于设置新窗口的特性,如窗口位置、是否最大化等
@一个布尔值:用于设置是否用新页面取代浏览器历史记录中当前页面的值
eg:var testWindow = window.open("www.baidu.com","top","height=400px,width=400px"); // 在名为top的框架中打开一个宽、高均为400px的窗口,并将其赋值给testWindow变量
eg:testWindow.close(); //关闭该窗口
eg:var opener = testWindow.opener; // 获取打开当前窗口的原始窗口
1.4 延时调用
超时调用主要使用window对象的setTimeout()方法,它接受两个参数:
@代码:即要执行的代码,最好以function(){代码}的形式给出,哪怕是函数的调用也最好封装一层function(){}
@毫秒值:即在代码执行前需要等待的时间的毫秒值。
eg:sayHello(alert("hello"));
var task = setTimeout(function(){
sayHello();
},1000);
clearTimeout(task); // 清除延时任务(需要在任务执行之前调用)
需要注意的是经过设置的时间之后,代码并不一定会执行,因为js为单线程解释器,因此在特定的时间只能执行一段代码,各个任务按照其在任务栈中的顺序依次执行,延时调用就是延迟一定的时间才入栈,如果此时任务栈为空,则任务立即执行,但如果任务栈不为空,则代码并不会立即执行。
1.5 间歇调用
间歇调用使用的是setInterval()方法,同理,该方法也接受两个参数:
@代码 :同超时调用
@毫秒值:两次执行之间的时间的毫秒值
eg:sayHello(alert("hello"));
var task = setInterval(function(){
sayHello();
},1000);
clearInterval(task); // 清除间歇任务(如果当次任务已经出发,则不会影响当次任务的执行,即从下一次还未触发的任务生效)。
间歇调用可能会触发一些问题,例如上次的任务还未停止,下一次任务已经开始。所以,最好的办法就是利用两个延时调用的嵌套来模拟间歇调用,这样就可避免这些问题。
eg:
var num = 0;
var max = 10;
function increamentNum(){
num++;
if(num < max){
setTimeout(function(){
increamentNum();
},1000);
}else{
alert("done");
}
}
setTimeout(function(){
increamentNum();
},1000);
1.6 系统对话
主要是三个方法(详情请百度):
@alert():弹出消息框,用于告知用户信息
@confirm():向用户确认,返回一个布尔值
@prompt(要显示的文本--给用户看,输入文本的默认值):提示框,用于让用户输入文本