JS学习笔记（第8章）（BOM）

1、window对象

BOM的核心对象是window，它表示浏览器的一个实例。window既是通过Javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

1.1 全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法；

(1) 定义全局变量与在window对象上直接定义属性的区别在于：全局变量不能通过delect操作符删除，而直接在window对象上定义的属性可以。

var age = 29;
window.color = "red";
delect window.age;     //报错
delect window.color;   //true

• 原因在于使用var语句添加的window属性有一个名为[[Configurable]]的特性，这个特性的值被设置为false,因此这样定义的属性不可以通过delectable操作符删除。

(2) 尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。

var newValue = olaValue;             //这里会报错，因为oldValue未定义
var newValue = window.oldValue;      //这里不会报错，因为这是一次属性查询

1.2 窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架名称来访问相应的window对象。每个window对象都有一个name属性，其中包含框架的名称。

• top对象始终指向最高（最外）层的框架，也就是浏览器窗口；
• parent（父）对象始终指向当前框架的直接上层框架；
  [在某些情况下，parent有可能等于top；但在没有框架的情况下，parent一定等于top（此时它们都等于window）]
• self对象始终指向window；
• 所有这些对象都是window对象的属性，可以通过window.parent、window.top等形式来访问；

1.3 窗口位置

• screenLeft属性、screenTop属性：分别用于表示窗口相对于屏幕左边和上边的位置；（IE、Safiari、Opera、Chrome）
• screenX属性、screenY属性：分别用于表示窗口相对于屏幕左边和上边的位置；（Firefox、Safari、Chrome）
• moveTo()方法、moveBy()方法：将窗口精确地移动到一个新位置，moveTo()接收的是新位置的x和y坐标值，moveBy()接收的是在水平和垂直方向上移动的像素数。

    window.moveBy(0,100);        //将窗口向下移动100像素
    window.moveTo(200,300);      //将窗口移动到（200，300）

1.4 窗口大小

（1）四个属性：innerWidth、innerHeight、outerWidth、outerHeight

• 在IE9+、Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层的window对象还是从某个框架访问）；
• 在Opera中，outerWidth和outerHeight表示页面视图容器（单个标签页对应的浏览器窗口）的大小；innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）；
• 在Chrome中，outerWidth、outerHeight和innerWidth、innerHeight返回相同的值，即视口大小而非浏览器窗口大小

（2）取得视口大小

• 在IE、Safari、Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth document.documentElement.clientHeight中保存了页面视口的信息；
• 在IE6中，这些属性必须在标准模式下有效；如果是混杂模式，则需通过document.body.clientWidth和document.body.clientHeight取得相同信息；
• 在混杂模式的Chrome中，均可使用。例：无法确定浏览器窗口本身大小，但却可取得页面视口的大小

var pageWidth=window.innerWidth,
    pageHeight=window.innerHeight;
if(typeof pageWidth !="number"){
    if(document.compatMode=="CSS1Compat"){  //通过检查document.compatMode来确定页面是否处于标准模式
        pageWidth=document.documentElement.clientWidth;
        pageHeight=document.documentElement.clientHeight
    }
    else{
        pageWidth=document.body.clientWidth;
        pageHeight=document.body.clientHeight;
    }
}

（3）调整浏览器窗口大小

• resizeTo():接收两个参数，接收浏览器窗口的新宽度和新高度
• resizeBy():接收两个参数，接收新窗口与原窗口的宽度和高度之差

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

1.5 导航和打开窗口

window.open() 这个方法通常可以接收四个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

• 通常只需传递第一个参数，最后一个参数只在不打开窗新窗口的情况下使用；
• 如果传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的URL；第二个参数也可以是任何一个特殊的窗口名称，如_self、_parent、_top、_blank;
• 如果给window.open()传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。

调用close()方法还可以关闭新打开的窗口，这个方法仅适用于通过window.open()打开的弹出窗口；
新创建的window对象有一个opener属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层window对象（top）中有定义。将新创建的变迁也的opener属性设置为null，即表示在单独的进程中运行新标签页。

1.6 间歇调用和超时调用

超时调用：表示在指定时间后执行代码 setTimeout(要执行的代码，以毫秒表示的时间)、clearTimeout(超时调用ID)
注意:经过一定时间后改代码也不一定执行，因为JS是一个单线程解释器，任务会按照队列执行，经过该时间将任务添加到队列中。如果队列为空，添加的代码就会立即执行，否则就要等前面的代码执行完了以后再执行
间歇调用：表示每隔指定的时间就执行一次代码 setINterval(要执行的代码，以毫秒表示的时间)、clearInterval(间歇调用ID)

//设置超时调用
var  timeoutId = setTimeout(function() {
    alert("Hello World");
},1000);
//取消
clearTimeout(timeoutId);


//设置间歇调用
var  timeintervalId = setTimeout(function() {
    alert("Hello World");
},1000);
//取消
clearTimeout(timeintervalId);

在开发环境下，很少使用真正的间隙调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。因此一般认为使用超时调用来模拟间歇调用是一种最佳模式。如下，是采用超时调用模拟一个间歇调用。

//间歇调用
var num = 0;
var max = 10;
var intervalId = null; 
function incrementNumber() {
    num++;       
    //如果执行次数达到了max设定的值，则取消后续尚未执行的调用
    if(num == max) {
        clearInterval(intervalId);
        alert("Done");
    }
}
intervalId = setInterval(incrementNumber, 500);


//超时调用模拟间歇调用
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
    num++;
    //如果执行次数达到了max设定的值，则取消后续尚未执行的调用
    if(num < max) {
       setTimeout(incrementNumber, 500);
    }else{
        alert("Done");
    }
}
setTimeout(incrementNumber, 500);

1.7 系统对话框

alert();
confirm();
prompt(要显示给用户的提示，文本输入域的默认值)；
//显示“打印”对话框
window.print();
//显示“查找”对话框
window.find();

2、location对象

2.1 查询字符串参数

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;
    //逐个将每一项添加到agrs对象中去
    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;
}

2.2 位置操作

P208

replace(要导航到的URL)，在调用replace()方法之后，用户不能会发哦前一个界面；
reload()作用是重新加载当前显示的界面。
location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）

3、navigator对象

Navigator 对象包含有关浏览器的信息。通常用于检测显示网页的浏览器类型。

4、screen对象

Screen 对象包含有关客户端显示屏幕的信息。

5、history对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
length属性，go()、back()、forward()方法