Javascrip之BOM

重点内容

• 理解windows对象-BOM核心
• 控制窗口、框架、弹出窗口
• 利用location对象中的页面信息
• 利用navigator对象了解浏览器

BOM:浏览器对象模型[Browner Object Model]，提供与浏览器交互的方法和接口，通过BOM可以操作浏览器窗口。根本上只处理浏览器窗口和框架，但是针对浏览器的JS扩展也算在BOM，扩展：

• 弹出新浏览器窗口的功能
• 移动、缩放、关闭浏览器窗口的功能
• 提供浏览器详细信息的navigator对象
• 提供浏览器所加载页面的详细信息的location对象
• 提供用户显示器分辨率详细信息的screen对象
• 对cookie的支持
• 向XMLHttpRequest和IE的ActiveXObject这样的自定义对象

1 window对象

　　window对象是BOM的核心对象。在浏览器中，window对象既通过JS访问浏览器窗口的一个接口，又是ECMAScript规定的global对象。注意：定义全局变量，不能通过delete操作符删除，而定义window对象上的定义的属性可以。

A.全局作用域

//全局作用域：网页中定义的任何一个对象、变量、函数，都以window作为global对象，有权访问parseInt()等方法。
eg1:
var age=29;
function sayAge(){
  alert(this.age);  
}
alert(window.age);
sayAge();
window.sayAge();

eg2:
var age=29;
window.color="red";

delete window.age;
delete window.color;
alert(window.age); //29
alert(window.color);//undefined

eg3://two未定义
var one=two;//控制台中会显示referenceError: two is not defined
var one=window.two;//控制台不会报错，one的值为undefined.

B.窗口关系及框架

top对象:始终指向最高（最外）层的框架，也就是浏览器窗口。

parent对象:始终指向当前框架的直接上层框架。parent有可能等于top，没有框架的情况下，parent=top。

self对象:始终指向window，window=self。

比如：window.parent，window.top等形式来访问。

<frameset rows="160,*">
  <frame src="frame.html" name="topFrame">
  <frameset cols="50%,50%">
    <frame src="anotherframe.html" name="leftFrame">
    <frame src="yetanotherframe.html" name="rightFrame">
  </frameset>
</frameset>

页面包含框架，每个框架都有window对象[有一个name属性，包含框架名称]，并保存在frames集合[通过数值索引，从0开始，左右上下]中。frames集合通过名称或索引进行引用。

C.窗口位置

窗口位置：确定和修改window对象位置的属性和方法。moveTo()和moveBy()方法有可能将窗口精确地移动到一个新位置。

//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗口向下移动100像素
window.moveBy(0,100);
//将窗口移动（200,300）
window.moveTo(200,300);
//备注：不适应与框架，只能对window对象使用。

D.窗口大小

resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。

//resizeTo()接收浏览器窗口的新宽度和新高度；resizeBy()接收新窗口与原窗口的宽度和高度之差
//调整到100*100
window.resizeTo(100,100)
//调整到200*150，与第一个对比
window.resizeBy(100,50)
//调整到300*300
window.resizeTo(300,300)

E.导航和打开窗口

window.open()方法既可以导航到一个特定的URL,又可以打开一个新的浏览器窗口。

window.open()可以接收4个参数：要加载的URL，窗口目标，一个特定字符串、布尔值。

第二个参数：_self、_parent、_top、_blank。

第三个参数：特定字符串，用逗号分隔，表示在新窗口中都显示了哪些特性。

　　第三个参数选项值：

//等同于<a href="http://www.baidu.com" target="topFrame"></a>,用户单击链接，名叫topFrame的窗口或 框架，在该窗口或框架下加载URL。
window.open("http://www.baidu.com",topFrame");

//eg:新打开一个链接，并可以调整大小的、位置的新窗口
var wrWin = window.open("http://www.baidu.com/","wrWindow","height=400,width=400,top=10,left=10,resizeable=yes");
wrWin.resizeTo(500,500);//调整大小
wrWin.moveTo(100,100);//移动位置
wrWin.close();//关闭新打开的窗口。 

F.间歇调用和超时调用

JS是单线程语言，运行通过设置超时值和间歇时间值来调度代码在特定的时刻执行。超时时间值在指定的时间过后执行代码，间歇时间是每隔指定的时间就执行一次代码。超时时间和间歇时间都是接收2个参数：要执行的代码和执行代码前的等待时间(毫秒)。

• 超时调用：window.setTimeout()方法。
• 间歇时间：window.setInterval()方法。

//eg1:设置超时时间,在全局作用域中执行
var timeoutId = setTimeout(function(){
    alert("Hello");
},1000);

//取消超时时间
clearTimeout(timeoutId)

//eg2:设置间歇时间
var intervalId= setInterval(function(){
    alert("Hello");
},1000);

//取消间歇时间
clearInterval(intervalId) 

G.系统对话框

浏览器可以通过alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息。

alert()：显示框，接受一个字符串并将其显示给用户。

confirm():选择框，让用户决定是否执行给定的操作。

prompt():提示框，接受2个参数：要显示给用户的文本提示和文本输入域的默认值（可以是空字符串）。

2 location对象

　　location对象提供了与当前窗口中加载的文档信息和导航功能。location是window的属性，也是document的属性，他们引用同一个对象。

location.reload();//重新加载[有可能从缓存中加载]

location.reload(true);//重新加载[从服务器重新加载]

//eg1:查询字符串参数  
function getQueryStringArgs() {
//取得查询字符串并去掉开头的问号
    var qs=(location.search.length >0 ? location.search.substring(1):""),
            args={},//保持数据的对象
            items=qs.length ? qs.split("&"):[],//取得每一项
            item=null,
            name=null,
            value=null,
            //在for循环中使用
            i=0;
            len=items.length;
//逐个将每一项添加到args对象中
    for(i=0,i<len;i++){
      item=items[i].split("=");
      name = decodeURIComponent(item[0]);
      value = decodeURIComponent(item[1]);
      if(name.length){
        args[name]=value;
      }
    }
    return args;
  }

//eg2:位置操作，assign()方法:为其传递一个URL，立即打开新URL并在浏览器的历史记录中生成一条记录。
location.assign("http://www.baidu.com");

3 navigator对象

所有浏览器中的属性和方法，支持的浏览器版本。

navigator对象的属性和方法：

 

//检测浏览器中是否安装了特定的插件，用plugins数值来达到这个目的。
name:插件的名字；description：插件的描述；filename:插件的文件名；length:插件所处理的MIME类型数量。
    function hasPlugin(name) {
      name=name.toLowerCase();
      for (var i=0;i<navigator.plugins.length;i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
          return true;
        }
      }
      return false

    }
//检测flash
alert(hasPlugin("Flash"));

//检测QuickTime
alert(hasPlugin("QuickTime"));

总结：

　　浏览器对象模型（BOM）以windows对象为依托，表示浏览器窗口以及页面可见区域。windows对象还是ECMAScript中的Global对象，所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命令空间下。

BOM的组成部分：

• 框架保存在frame集合中，每个框架都有windows对象以及原生的构造函数及其他函数的副本，可以通过位置或名称来访问。
• 窗口指针，可以引用父框架及其他框架。
• top对象指向最外层框架，即整个浏览器窗口。
• parent对象表示包含当前框架的框架，而self对象指window。
• location对象用来访问浏览器的导航系统，设置相应的属性，逐段或整体性地修改浏览器的URL。
• repalce()方法可以导航到一个新的URL，该URL会替换当前显示的页面。
• navigator对象提供与浏览器有关信息。

BOM和DOM的结构关系示意图: