BOM

150 阅读4分钟

1、window 对象

BOM的核心对象是 window,它表示浏览器的一个实例。在浏览器中,window 对象有双重角色, 它既是通过 JavaScript访问浏览器窗口的一个接口,又是 ECMAScript规定的 Global 对象。这意味着 在网页中定义的任何一个对象、变量和函数,都以 window 作为其 Global 对象,因此有权访问 parseInt()等方法。

  • 全局作用域 我们在全局作用域中定义了一个变量 age 和一个函数 sayAge(),它们被自动归在了 window 对象 名下。因此,可以通过 window.age 访问变量 age,可以通过 window.sayAge()访问函数 sayAge()。

      var age = 29; 
      window.color = "red"; 
      delete window.age; 
      delete window.color; //returns true
      alert(window.age);   //29
      alert(window.color); //undefined
    
  • 窗口关系及框架 如果页面中包含框架,则每个框架都拥有自己的window 对象,并且保存在frames 集合中。在frames 集合中,可以通过数值索引(从 0开始,从左至右,从上到下)或者框架名称来访问相应的 window 对象。 每个 window 对象都有一个 name 属性,其中包含框架的名称。

  • 窗口位置 用来确定和修改 window 对象位置的属性和方法有很多,比如:IE、Safari、Opera 和 Chrome 都提供了 screenLeft 和 screenTop 属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息

  • 窗口大小 打开窗口,具有4个属性:innerWidth、innerHeight、outerWidth 和 outerHeight。

  • 导航和打开窗口 使用 window.open()方法既可以导航到一个特定的 URL,也可以打开一个新的浏览器窗口。这个 方法可以接收 4个参数:要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览 器历史记录中当前加载页面的布尔值。

  • 间歇调用和超时调用 超时调用需要使用 window 对象的 setTimeout()方法,它接受两个参数:要执行的代码和以毫秒 表示的时间,其中,第一个参数可以是一个包含 JavaScript代码的 字符串,例如:

      setTimeout("alert('Hello world!') ", 1000); 
      setTimeout(function() {      alert("Hello world!");  
      }, 1000); 
    

2.location 对象

location 是有用的 BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一 些导航功能。

  • 查询字符串参数 下面这样创建一个函数,用以解析查询字符串,以此返回包含所有参数的一个对象:

      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; } 
    
  • 位置操作 使用 location 对象可以通过很多方式来改变浏览器的位置。首先,也是常用的方式,就是使用 assign()方法并为其传递一个 URL,如:

      location.assign("http://www.wrox.com");
    

3.navigator 对象

早由 Netscape Navigator 2.0引入的 navigator 对象,现在已经成为识别客户端浏览器的事实标 准。虽然其他浏览器也通过其他方式提供了相同或相似的信息(例如,IE中的 window.clientInfor- mation 和 Opera中的 window.opera),但 navigator 对象却是所有支持 JavaScript的浏览器所共有 的。与其他 BOM 对象的情况一样,每个浏览器中的 navigator 对象也都有一套自己的属性。

检测插件

  • name:插件的名字。
  • description:插件的描述。
  • filename:插件的文件名。
  • length:插件所处理的 MIME类型数量。

4.screen 对象

screen 对象基本上只 用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器 中的 screen 对象都包含着各不相同的属性,下表列出了所有属性及支持相应属性的浏览器。

5.history 对象

history 对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为 history 是 window 对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的 history 对象与特定的 window 对象关联。 使用 go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前,如:

    //后退一页 
    history.go(-1); 

    //前进一页 
    history.go(1); 

    //前进两页 
    history.go(2);