八、 bom （浏览器对象模型）

『 Week NO.5』

8.1 window对象

    bom的核心是window，window既是js访问浏览器的一个接口，同时又是global对象。

    8.1.1 全局作用域

    在全局作用域中声明的变量和函数都将成为window的属性和方法。

    定义全局变量和window对象上直接定义属性的区别：前者不能被delete操作符删除，后者可以

    

    var name = “meiyzeng”；
    window.age = "26"
    
    delete window.name
    alert (window.name)   // "meiyzeng"
    delete window.age
    alert (window.age )   //  "undefined"

    另外，可以通过window对象查询未声明变量是否存在：

     
    var sex = guess      //error
    var sex = window.guess  //sex为undefined

    8.1.2 窗口和框架

       top：

    在frames 中 top对象始终指向最外层框架，也就是浏览器窗口。为了保证在一个框架中访问另一个框架，通常用

    top.frames[0]代替window.frames[0]

   

      parent：

    parent对象始终指向当前框架的上层框架，在没有框架情况下等于top。

   （ ps：除非最高层的窗口是通过window.open()打开，否则window对象中的name属相不含有任何值。）

    

    self：

    self始终指向window，可以和window互换。

    8.1.3兼容浏览器获得窗口位置:

  

    var leftpos = （typeof window.screenLeft =="number"）? window.screenLeft : window.screenX 

    在最外层window对象中有moveTo（）定位方法和moveBy（）移动方法，但不兼容低版本浏览器。

    

    8.1.4窗口大小:   

 document.documentElement.clientHeight || document.body.clientHeight;

    同样有不兼容低版本浏览器两种方法调整窗口大小：

    window.resizeTo(100,100)  //调整窗口为100*100

    window.resizeBy(100,50)    //调整窗口到200*150

    8.1.5导航和窗口打开

    window.open()接收四个参数：URL、窗口目标、特定字符串、是否替代当前页面的布尔值。

    其中窗口目标有：_top,_parent,_self,_blank四个特殊值。也可直接为窗口名称

    8.1.6 间歇调用和超时调用

     超时调用：setTimeout()方法，接收两个参数，一个执行代码，另一个为时间。其对应有clearTimeout()方法取消

    间歇调用：setInterval()方法同样接手两个参数。其对应的取消方法为有clearInterval() 。

    使用超时调用来模拟间歇调用时一种最佳模式，因为后一个间歇调用有可能在前一个间歇调用结束前便启动，所有不建议使用。

    

     8.1.7 系统对话框

      alert、confirm、prompt三种方法都可以调用系统对话框。

     除此外，还有window.find()和window.print通过js打开的对话框。

8.2 location对象

     window.location和document.location引用的是同一个对象。location对象的用处不仅是保存当前文档的信息，而且它将URL解析成独立片段。

     

 

     8.2.1 查询字符串参数

      从上面的search(注意这里的search为location的属性，有别于search()方法)我们知道可以通过其返回从？开始到末尾的url字符串，但是无法访问每个查询字符串参数，故可创建函数解析查询字符串方法：

    

      
       function getQuerySringArgs(){
           
            //取得查询字符串 并去掉？
            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 = item[i].split("=");
                name = decodeURIComponent( item[0]);  //解码
                value = decodeURIComponent( item[1]);
                 if (name.length){
                        args[name] = value;
                  }
           }
            return args;
      }

       依照上述方法 比如：在百度中输入meiyzeng，则对应的网址会变成

      http://www.baidu.com/s?word=meiyzeng&tn=sitehao123&ie=utf-8

     
      1.利用search方法会得到从？开始的字符串：?word=meiyzeng&tn=sitehao123&ie=utf-8

     
      2.调用上述方法去掉问号 则为 word=meiyzeng&tn=sitehao123&ie=utf-8

     
      3. 紧接着items即将字符串按 "&" 隔开拆分  则变成了[ word= meiyzeng ]、[tn=sizehao123] 和[ie= utf-8] 三个名值对；

     
      4.再将三部分用"="拆分，则名分别为word、tn、ie 而对应的值分别为、meiyzeng、sizehao123、和utf-8。从而访问每个查询字符串参数。

      8.2.2位置操作   

      在改变浏览器位置的方法中，最常用的是设置location.href属性。

     下面三种方式其实效果一致：

    

     
     window.location = "http://blog.csdn.net/meiyzeng8" ;
     location.assign("http://blog.csdn.net/meiyzeng8") ;
     location.href = "http://blog.csdn.net/meiyzeng8" ;

     location具有较多属性，方法在此不一一列举， 除了修改hash属性外，其他均会以新URL来重新加载页面。而通过location的属性修改URL都将在浏览器中产生一条可“后退”的历史记录，要禁用该方法，可以使用replace()方法： 

     location.replace("http://blog.csdn.net/meiyzeng8")  。

     另外，location.reload()方法的作用是重新加载当前页面，如果没有传进来参数，则会以最有效方式重新加载，但如果页面跟上次加载没有改变则可能读取缓存，要强制从服务器中重新加载可以使用location.reload(true)，建议放至最后一行。

8.3 navigator对象 

      navigator对象的属性通常用于检测网页的浏览器类型。

     8.3.1检测插件

      非ie：使用plugins数组（包含name、description、filename、length）

        ie：唯一方式使用专有的ActiveXObject类型，并尝试创建一个特定插件实例。ie是以com对象的方式实现插件的，而com对象使用唯一标识符来标识，要检测必须知道其com表示符。

8.4 history对象

      history对象保存着用户上网的历史记录，使用go()方法可以在历史记录中任意跳转。

    

   
      go(-1)   //后退一页  等同于 history.back()
      go(1)    //前进一页  等同于 history.forward()
      go(2)    //前进两页

      也可以在go(“string“）中传入字符串，将跳转到历史记录中包含该字符串最近的位置，假如没有该字符串便不执行操作。

      此外，history中的length的属性保存着历史记录的数量。