JavaScript高级编程——BOM

1. window对象：
   1. BOM的核心，表示浏览器的一个实例；
   2. 在浏览器中，window对象既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这意味着在网页中定义的任何一个对象、变量和函数，都以window 作为其 Global 对象，故有权访问parseInt()等方法；
   3. 全局作用域
      1. 在全局作用域中声明的变量、函数都会变成window对象的属性和方法；
      2. 全局变量与直接在window对象上定义的属性的区别：全局变量不能通过delete操作符删除，二直接在window对象上定义的属性可以；
      3. 访问未声明的变量时将报错，此时可以通过查询window对象属性的方式来判断属性是否存在； var newValue = oldValue; //会抛出错误，因为oldValue未定义 var newValue = windwo.oldValue; //不会抛错，因为这是一次属性查询，未定义的将会返回undefined
   4. 窗口关系及框架
      1. 页面中包含框架时，每个框架都有自己的window对象，并且保存在frames集合中；
      2. frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象；
      3. 每个window对象都包含name属性，表示框架名称；
      4. top对象：始终指向最高（最外）层的框架，也就是浏览器窗口；对于最上层的框架，除非是通过window.open()打开的，否则其window对象的name属性不包含任何值；
      5. parent对象：始终指向当前框架的直接上层框架（在没有框架的情况下，parent一定等于top）；
      6. self对象：始终只想window，可以与window对象互换使用；
      7. 上面的所有对象都是window对象的属性，可以通过点操作符进行访问，如window.top、window.parent等；
   5. 窗口位置：
      1. window.screenLeft、window.screenTop：IE、Safari、Opera和Chrome都支持该属性
      2. window.screenX、window.screenY：FireFox支持该属性，同时Safari和Chrome也同时支持；
      3. 跨浏览器获取窗口左边与上边位置：
         var  leftPos = (typeof window.screenLeft ==  "number") ? window.screenLeft : window.screenX;
         var  topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
      4. window.moveTo(x, y)：传入新位置的x，y坐标值；
      5. window.moveBy(hPixel,vPixel)：传入水平和垂直方向上移动的像素数；
      6. moveTo()、moveBy()可能会被浏览器禁用；且在Opera和IE7（或更高版本）中默认是禁用的；且这两个方法均不适用于框架，只能对最外层的window对象使用；
   6. 窗口大小：
      1. 属性：innerWidth、innerHeight、outerWidth 和outerHeight
      2. IE9+、Firefox、Safari、Opera 和Chrome 均为此提供了此4 个属性；
      3. outerWidth 和outerHeight 属性：在IE9+、Safari 和Firefox中，这两个属性返回的是浏览器窗口本身的尺寸（无论是从最外层的window 对象还是从某个框架访问）；在Opera 中，则表示页面视图容器的大小;
      4. innerWidth 和innerHeight属性：表示该容器中页面视图区的大小（减去边框宽度）；
      5. 在Chrome 中，outerWidth、outerHeight 与innerWidth、innerHeight 返回相同的值，即视口（viewport）大小而非浏览器窗口大小；
      6. 获取页面可视窗口大小：

         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;
             }
         }

      7.  

         resizeTo()和resizeBy()：调整浏览器窗口的大小；resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽度和高度之差；

   7. 导航和打开窗口

      1. window.open(url, target, character, isReplace)：既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口

         1. url：要加载的URL
         2. target：窗口目标，当该参数是已有窗口或框架的名称，则会在具有该名称的窗口或框架中加载第一个参数指定的URL；
         3. character：是一个逗号分隔的设置字符串，在target不是已存在的窗口或框架情况下作为新窗口或新标签页特性，否则忽略该参数；
            
         4. isReplace：表示新页面是否取代浏览器历史记录中当前加载页面的布尔值；
         5. 通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。
      2. window.open()方法会返回一个指向新窗口的引用：

         var newWindow = window.open("http://www.wrox.com/","wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes");

          
         1. 引用的对象与其他window 对象大致相似，但我们可以对其进行更多控制；
         2. newWindow.resizeTo(500,500)：调整大小;
         3. newWindow.moveTo(100,100)：移动位置;
         4. newWindow.close()：关闭新打开的窗口，该方法仅适用于通过window.open()打开的弹出窗口;
         5. newWindow.opener：新创建的window 对象的属性，保存着打开它的原始窗口对象，这个属性只在弹出
            窗口中的最外层window 对象（top）中有定义，而且指向调用window.open()的窗口或框架；
         6. newWindow.opener = null：将opener 属性设置为null 就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行；
      3. 安全限制
      4. 弹出窗口屏蔽程序
         1. 弹出窗口被屏蔽有两种情况：一种是浏览器内置程序屏蔽；另一种是由第三方扩展程序屏蔽；
         2. 若弹出窗口是被浏览器内置程序屏蔽，则执行判断window.open()返回的值是否为null即可判断：

            var wroxWin = window.open("http://www.wrox.com", "_blank");
            if (wroxWin == null){
                alert("The popup was blocked!");
            }

             

         3. 若是被第三方扩展程序屏蔽，window.open()将会抛出一个错误，所以需要通过try-catch将其捕获

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

             

      5. 间歇调用与超时调用
         1. setTimeout(execCode, time)：
            1. execCode：可以是一个包含JavaScript代码的字符串，也可以是一个函数（推荐使用）；
            2. time：等待时间，单位时毫秒；
            3. 该方法将返回一个数值ID，表示超时调用，该ID是计划执行代码的唯一标识符，可通过它来取消超时调用（通过clearTimeout(超时调用ID)取消）；
            4. 超时调用的代码是在全局作用域中执行的，故在非严格模式下this指向window对象，严格模式下则为undefined；
         2. setInterval(execCode, time)：
            1. execCode：与setTimeout相同
            2. time：执行间隔时间；
            3. 该方法调用后同样会返回一个数值ID，表示间隔调用，该ID可用于取消间隔调用（通过clearInterval(间隔调用ID)取消）；
      6. 系统对话框
         1. alert()、confirm()、prompt()
         2. 外观由操作系统及（或）浏览器设置决定，而不是由CSS 决定；
         3. 通过这几个方法打开的对话框都是同步和模态的。也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行；
         4. confirm()方法返回的是布尔值：true 表示单击了OK，false 表示单击了Cancel 或单击了右上角的X 按钮;
         5. prompt(显示的内容, 输入框默认内容)方法返回文本输入域的值：提示框中除了显示OK 和Cancel 按钮之外，还会显示一个文本输入域，以供用户在其中输入内容；
         6. window.print()：
         7. window.find()：

   8. location对象

      1. 概述

         1. location 是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能；
         2. window.location 和document.location 引用的是同一个对象；
         3. 它将URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段；
         4. location的属性：
            
         5. 查询字符串参数

            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;
            }
            
            方法的调用
            //假设查询字符串是?q=javascript&num=10
            var args = getQueryStringArgs();
            alert(args["q"]); //"javascript"
            alert(args["num"]); //"10"

             

         6. 位置操作
            1. location.assign(url)：在当前页面打开新URL 并在浏览器的历史记录中生成一条记录，该方法与通过window.location、location.href来设置URL值的效果相同；
            2. location.replace(url)：在当前页面打开新URL，但不会在浏览器的历史记录中生成记录；
            3. location.reload()：
               1. location.reload();有可能从缓存中加载（如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载）；
               2. location.reload(true);重新加载（强制从服务器重新加载）
               3. 位于reload()调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。所以，最好将reload()放在代码的最后一行。