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

一、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();

二、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); //从新加载（从服务器从新加载）

三、navigator对象

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

四、screen对象

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

五、history对象

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