js中的BOM

在Web中使用js，那么BOM(浏览器对象模型)是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。BOM的核心对象是window，它表示浏览器的一个实例。它既是通过js访问浏览器窗口的接口，又是js的Global对象(所有全局变量挂载在上面)。

窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames的集合中。

窗口位置

用来确定和修改window对象位置的属性和方法有很多，然而我们无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值(这里我们可以参考另一篇博文浏览器中的宽高)。然而使用moveTo和moveBy方法倒是有可能将窗口精确地移动到一个新位置

   window.moveTo(0, 0);
   //将窗口向下移动100像素
   window.moveBy(0, 100);

窗口大小

跨浏览器确定一个窗口的大小不是一件容易的事。但我们可以获得页面视口的大小

   var pageWidth = window.innerWidth,
       pageHeight = window.innerHeight;
   if(typeof pageWidth != 'number'){
       if(document.compatMode == 'CSS1Compat'){
          pageWidth = document.documentElement.clientWidth;
          pageHeight = document.documentElement.clientHeight;
       } else {
          pageWidth = document.body.clientWidth;
          pageHeight = document.body.clientHeight;
       }
   }

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

   //调整到100*100
   window.resizeTo(100, 100);
   //调整到200*150
   window.resizeBy(100, 50);

这两个方法和移动窗口位置的方法类似，有可能被浏览器禁用

导航和代开窗口

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

   window.open('http://www.wrox.com', 'topFrame');

调用这行代码，就如同用户单击了href属性为http://www.wrox.com，target属性为topFrame的a链接

   window.open('http://www.wrox.com', 'topFrame','height=400, width=400, top=10, left=10');

如果浏览器扩展或其他程序阻止弹出窗口，那么window.open通常会抛出一个错误，所以可以这样处理

   var blocked = false;
   try {
      var wroxWin = window.open('http://www.wrox.com', '_blank');
      if(wroxWin == null){
          blocked = true;
      }
   } catch(e){
      blocked = true;
   }
   if(blocked){
      alert('The popup was blocked');
   }

location

location对象是最有用的BOM对象之一，它提供了与当前窗口加载文档有关的信息，还提供了一些导航功能。
location.search返回从问号到URL末尾的所有内容(包括问号)。我们通常会使用这样一个函数来解析search

   function getQueryStringArgs(){
      //去掉问号
      var qs = location.search.length > 0 ? location.search.substring(1) : '';
      var args = {};
      var items = qs.length ? qs.split('&') : [];
      var item = null, 
         name = null,
         value = null;
      for(var i = 0, len = items.length; i < len; i++){
          item = items[i].split('=');
          name = item.decodeURIComponent(item[0]);
          value = item.decodeURIComponent(item[1]);
          if(name.length){
             arg[name] = value;
          }
      }
      return args;
   }

将每个查询字符串参数都变成返回对象的属性。

位置操作

使用assign方法可以立即打开新URL并在浏览器的历史记录中生成一条记录

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

这个效果等同于下面两种

   window.location = 'http://www.wrox.com';
   location.href = 'http://www.wrox.com';

除了修改location的hash(锚点)，其他属性的修改都会导致页面以新的URL重新加载(location.search，location.port等等)

navigator对象

navigator的userAgent常用于检测显示网页的浏览器类型

history对象

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

history中的pushState常用于异步加载新内容的记录插入