JavaScript BOM ( 8 章 ) (目前 略)

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对象的属性。