BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。( 浏览器提供商各不一样 )
w3c 为了标准化, 已经把 BOM 的主要方面纳入 HTML5 规范中.
window对象
BOM的核心对象是 window,它表示浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器的窗口的一个接口,又是ECMAScript规定的Global对象。
所有在全局作用域中声明的变量,函数都会变成window对象的属性和方法。
1: var age = 29;
2: function sayAge(){
3: alert(this.age);
4: }
5:
6: alert(window.age); //29
7: sayAge(); //29
8: window.sayAge(); //29
frame HTML5不支持
如果页面包含框架 frame,那么每个框架都拥有自己的 window对象( html5不支持 frame框架 ),window.frames[0] 之类的用法。而真正的window对象,是frames[0]对象的父对象。
窗口位置
确定和修改window对象位置的属性和方法很多。 如 screenLeft, screenTop,属性分别用于表示窗口相对于屏幕左边和上边的位置。(注意,各个浏览器的属性和方法不同 )
但是因为每个浏览器支持不同,所以要有如下代码:
这样,leftPos, 就是浏览器距离左边屏幕的距离,topPos 就是浏览器距离上边屏幕的距离。
window.moveBy(0, 100); //将窗口向下移动100像素
window.moveTo(200,300); //将窗口移动到(200,300)
window.moveBy(-50,0); //将窗口向左移动50像素
窗口大小
仍然存在浏览器差异的问题,window.innerWidth,window.innerHeight。属性
window.resizeTo(100,100) //调整窗口到 100,100
window.resizeBy(100,50) //调整窗口增加100,50,按照上边的基础,就是200,150
打开窗口
window.open(4个参数) //打开窗口
var w3cWin = window.open(“http://www.3cschool.com”,”w3c”,”height=400, width=400, top=10, left=10, resizable=yes”);
w3cWin = resizeTo(500, 00);
w3cWin = moveTo(100,100);
w3cWin.close();
但是目前很多浏览器都有安全限制,即不准许程序员调用此方法来弹出广告等内容。
间歇调用和超时调用
JavaScript是单线程语言,但它允许通过设置超时和间歇时间值来调用代码在特定时刻执行。
1)超时调用,在指定的时间过后执行代码 ( 单位是毫秒 ) 1秒后执行hello,world.
1: setTimeout(function(){
2: alert("Hello world");
3: }, 1000);
调用setTimeout()之后,该方法会返回一个数值ID, 这个 ID 计划执行超时代码的唯一标识符,通过它可以取消超时调用。clearTimeout()方法并将相应的超时调用 ID 作为参数传递给它。
1: //设置超时调用
2: var timeoutId = setTimeout(function(){
3: alert("Hello world");
4: }, 1000);
5:
6: //注意,把他取消
7: clearTimeout(timeoutId);
只要是在指定的时间尚未过去之前调用 clearTimeout(),就可以完全取消超时调用。
超时调用的代码都是在全局作用域中执行的,因此函数中 this 的值通常会指向 window 对象
2)间歇调用,在指定的时间间隔重复执行代码。
1: setInterval(function(){
2: alert("hello world");
3: }, 10000);
同样,该方法也会返回一个 ID,该 ID 用于在某个时刻取消调用。要取消使用 clearInterval()。
1: var num = 0;
2: var max = 10;
3: var intervalId = null;
4: function incrementNumber(){
5: num++;
6: if(num == max){
7: clearInterval(intervalId);
8: alert("Done");
9: }
10: }
11:
12: intervalId = setInterval(incrementNumber, 500);
超时调用模仿间歇调用 ( 上例 )
1: var num = 0;
2: var max = 10;
3: var intervalId = null;
4: function incrementNumber(){
5: num++;
6: if(num < max){
7: setTimeout(incrementNumber, 500);
8: }else{
9: alert("Done");
10: }
11: }
12:
13: setTimeout(incrementNumber, 500);
在使用超时调用时,没有必要跟踪超时调用 ID,因为每次执行代码后,如果不再设置另一个超时调用,调用就会自动停止,在开发环境中,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动( 这样,就很难控制间歇调用 ),而像这个例子一样使用超时调用代替间歇调用,则完全可以避免这一点。所以,最好不要使用间歇调用。
系统对话框
系统对话框的外观有操作系统及浏览器设置决定,而不是由CSS决定。
1)alert()
2)confirm() (点ok, true,点cancle或者关闭对话框, false)
1: if(confirm("Are you sure?")){
2: alert("I'm so glad you are sure");
3: }else{
4: alert("I'm sorry to hear you're not sure");
5: }
3)prompt() ( 2个参数,第1个事提示信息,第2个是用户输入的默认信息 )
prompt(“What is your name?”,”Michael”);
另外,如果用户点OK,则返回文本域的值,否则返回 null
location对象
location对象是最有用的BOM对象之一,它提供了当前窗口中加载文档有关的信息,还提供了一些导航功能。它既是window对象的属性,也是document对象的属性。即 document.location和window.location引用的是同一个对象。
location.assign(http://www.wrox.com); // 为浏览器传递一个地址
navigator对象
可以用来确认浏览器信息。以及cookie的部分信息。检测浏览器插件。等等。
navigator 提供了很多属性来确认浏览器的信息, 例如 appCodeName 浏览器名称, appVersion 浏览器版本, language 浏览器主语言 等等
检测插件, navigator.plugins 等
注: 所谓的浏览器差异化, 应该 只是说浏览器本身提供的API, 有差异, 或者提供相同API, 但是实现的方式有差异.
screen对象
顾名思义,是一些显示器相关的内容。
history对象
保存历史记录。是window对象的属性。