BOM——《JavaScript高级程序设计》笔记

八、BOM

　　8.1 window对象

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

　　　　8.1.1 全局作用域

　　　　　　在全局作用域中声明的所变量、函数都是window对象的属性和方法
　　　　　　定义全局变量 与 在window对象上直接定义属性 的差别：
　　　　　　　　全局变量无法使用delete操作符删除，直接在window对象上定义的属性可以。

var age = 29;
        window.color = "red";
        
        //在IE<9中会抛出错误，在其他浏览器返回false
        delete window.age;

        //在IE<9中会抛出错误，在其他浏览器中返回true
        delete window.color;    //returns true
        
        alert(window.age);      //29
        alert(window.color);    //undefined

  　　　　　　　　【在IE9以下，使用delete删除window的属性都会抛出错误！】
　　　　　　　　访问未声明的变量会抛出错误。但通过window对象可知道某个未声明的对象是否存在。

var newValue = window.oldValue;  //newValue被赋值undefined。这里不会抛出错误，因为这是一次属性查询！

 　　　　8.1.2 窗口关系 及 框架

　　　　　　@frames集合：每个框架都有自己的window对象，保存在frames集合中，可用数值索引或框架名访问对应的window对象。
　　　　　　　　每个window都有一个name属性包含框架名称。除非最高层窗口时通过window.open()打开的，否则该name属性不包含任何值。
　　　　　　@top对象：它始终指向最高(最外)层框架，即浏览器窗口。可通过它访问另一个框架。
　　　　　　@parent对象：(父)对象，始终指向当前框架的直接上层框架。
　　　　　　　　当没有框架时，parent = top = window 。
　　　　　　@self对象：始终指向window，可以跟window对象互换使用。【引用self对象只是为了与top和parent对应，不包含其他值】
　　　　　　@每个框架都有一套自己的构造函数，这些函数一一对应，但不相等。如，top.Object不等于top.frames[0].Object。

　　　　8.1.3 窗口位置【无法跨浏览器取得精确值】

　　　　　　screenLeft/screenTop (IE、Chrome 、Safari和 Opera)
　　　　　　screenX/screenY  (FireFox、Chrome 和 Safari)
　　　　　　　　@IE 和 Opera中，screenLeft/screenTop返回指定框架 相对屏幕的坐标。
　　　　　　　　@FireFox、Chrome 和 Safari中，screenLeft或screenX始终返回整个浏览器 相对屏幕的坐标。

　　　　　　moveTo()：接收窗口新位置的坐标。
　　　　　　moveBy()：接收窗口水平和垂直移动的像素数
　　　　　　　　@这两种方法都可能被浏览器禁用，却不适用于框架。

　　　　8.1.4 窗口大小

　　　　　　@在IE9+、FF、Safari 和 Opera中，innerWidth/innerHeight指视口大小，outerWidth/outerHeight指浏览器窗口大小。
　　　　　　@在Chrome中，innerWidth/innerHeight 和 outerWidth/outerHeight 都是指视口大小。
　　　　　　@在IE6 的标准模式中，document.documentElement.clientWidth/...中保存了页面视口的信息。
　　　　　　　　　　在混杂模式中，则是document.body.clientWidth/...中保存了视口的信息。
　　　　　　获取页面视口大小：

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

　　　　8.1.5 导航 和 打开窗口

　　　　　　① window.open()方法：四个参数，要加载的URL、窗口目标、特殊性字符串 及 一个布尔值。
　　　　　　　　@特殊性字符串：在不打开新窗口时，被忽略。menubar、status、toolbar、resizeble、location、left/top、width/height(最新值100)。
　　　　　　　　@布尔值：在不打开新窗口时可用，表示新页面是否取代浏览器历史记录中当前加载的页面。
　　　　　　　　@该方法会返回一个指向新窗口的引用，一些默认禁止修改主浏览器窗口大小和位置的，但允许通过window.open()调整窗口大小和位置。
　　　　　　② close()方法可关闭新打开的窗口。
　　　　　　　　@虽然没有用户的允许无法关闭主浏览器，但可以通过top.close()在不经用户允许中关闭弹出窗口。
　　　　　　　　@窗口关闭后，窗口引用依然还在，但只有用于检测是否关闭的closed属性(返回布尔值)。
　　　　　　③ opener属性：新创建的window对象有一个opener属性，保存着打开它的原始窗口对象。
　　　　　　　　@该属性只在弹出窗口的最外层window对象(top)中有定义，指向调用window.open()的窗口或框架。
　　　　　　　　@虽然弹出窗口有一个指针指向打开它的原始窗口，但原始窗口并没有这样的指针指向弹出窗口，原始窗口不跟踪记录他们打开的弹出窗口。
　　　　　　　　@IE和Chrome会在独立进程中运行每个标签页，若两个window对象需要通信，就不能运行在独立的进程中。
　　　　　　　　　　将opener设为null即告诉浏览器新创建的标签页不需与打开它的标签页通信，因此才能在独立的进程中运行，标签页之间的联系若切断，无法恢复。

 　　　　8.1.6 间歇调用、超时调用

　　　　　　JavaScript是单线程语言，但能通过设置超时值和间歇时间值来调度代码在特定的时刻执行。

　　　　　　超时调用 setTimeout()

        setTimeout("alert('Hello world!') ", 1000);
        
        setTimeout(function() { 
            alert("Hello world!"); 
        }, 1000);

　　　　　　　　@该方法的第一个参数可以是一个字符串或一个函数。由于传递字符串可能导致性能损失，故不建议使用字符串。
　　　　　　　　@由于JavaScript是单线程序的解析器，一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript任务队列。
　　　　　　　　　第二个参数指定过多长时间吧当前任务添加到队列中。若队列不为空，要等到前面的代码执行完后，才会执行setTimeout()指定的代码。
　　　　　　　　@调用setTimeout()后，该方法会返回一个数值ID，表示超时调用。该超时调用ID是计划执行代码的唯一标识符。
　　　　　　　　@要取消未执行的超时调用时，可调用clearTimeout()方法，将相应的超时调用ID作为参数传递给它。
　　　　　　　　@超时调用的代码都是在全局作用域中在执行的，因此函数中的this对象，在非严格模式下指向window对象，在严格模式下是undefined。

　　　　　　间歇调用 setInterval()

　　　　　　　　@调用该方法同样会返回一个间歇调用ID，并通过clearInterval()方法取消间歇调用。

var num = 0;
var max = 100;

function incrementNumber() {
    num++;

    //在执行次数不够指定次数时，重复超时调用
    if (num < max) {
        setTimeout(incrementNumber, 500);
    } else {
        alert("Done");
    }
}

setTimeout(incrementNumber, 500);

　　　　　　通常，使用超时调用来模拟间歇调用是一种最佳方案。

 　　　　8.1.7 系统对话框

　　　　　　浏览器通过alert()、comfirm() 和 prompt()调用系统对话框。通过这些方法打开的对话框都是同步和模态的，显示时代码会停止执行。
　　　　　　系统对话框与浏览器中显示的网页无关，不包含HTML。

if (confirm("Are you sure?")) {
    alert("I'm so glad you're sure! ");
} else {
     alert("I'm sorry to hear you're not sure. ");
}

　　　　　　　　@这种模式常在用户想要执行删除操作时使用。

var result = prompt("What is your name? ", "文本框默认值");
if (result !== null) {
 alert("Welcome, " + result);
}

　　　　　　　　@prompt()返回文本域中的值，或返回null。

　　　　　　还可通过JavaScript打开“查找”和“打印”对话框：window.print() 和 window.find()。

　　8.2 location对象

　　　　提供当前窗口加载的文档信息。
　　　　@location是一个特别的对象，它既是window对象的属性，也是document对象的属性。window.location和document.location引用同个对象。
　　　　@location将URL解析成独立的片段：
　　　　　　href：返回完整URL。location对象的toString()方法也返回该值
　　　　　　protocol：返回页面的协议。常为http:或https:
　　　　　　hostname：返回不带端号的服务器名称
　　　　　　host：若有，返回带端号的服务器名称
　　　　　　port：返回URL中指定的端号，无则返回空字符串
　　　　　　pathname：返回目录和/或文件名
　　　　　　search：返回查询字符串
　　　　　　hash：返回散列，无则返回空字符串

　　　　8.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;
    
    //逐个将每一项添加到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"

　　　　　　　　@由于查询字符串应该是被编码过的，所以要用decodeURIComponent()对其进行解码

　　　　8.2.2 位置操作

　　　　　　通过location对象改变浏览器的位置 最常见的方式是给assign()方法传递一个URL：
　　　　　　　　location.assign("http://www.site.com");   执行后立即打开新URl并在浏览器的历史记录中生成一条记录。
　　　　　　　　@将location.href或window.location设置为一个URl值，也会调用assign()方法。
　　　　　　修改location上述的属性(除了hash)，页面都会以新URL重新加载，历史记录中都会生一条新记录。
　　　　　　　　@在IE8+等浏览器中，修改hash值会在历史记录中生成新记录，
　　　　　　　　@在IE7-的浏览器中，用户单击“后退”和“前进”后 不会更新hash属性，只有在用户点击包含hash的URL时才会被更新。
　　　　　　当上述的属性如何一种属性被修改时，历史记录中都会生成一条新记录，用户可以使用“后退”和“前进”导航到记录的页面。
　　　　　　　　@使用replace()方法能禁止此行为。

setTimeout(function () {
    location.replace("http://www.wrox.com/");
}, 1000);

　　　　　　reload()方法，重新加载当前显示的页面。
　　　　　　　　@若无传递参数，页面会以最有效的方式重新加载。即若页面自上传加载后无修改时，页面将从缓存中重新加载。
　　　　　　　　@传递true参数，能强制页面从服务器重新加载。

　　8.3 navigator对象

　　　　此对象常用于识别客户端浏览器 或检测插件。

　　8.4 screen对象

　　　　基本上用来表明客户端的能力。包括浏览器窗口外部的显示器信息。每个浏览器的screen对象都包含不相同的属性。
　　　　设置全屏：【很多浏览器都禁止设置浏览器窗口大小】

window.resize(screen.availWidth,screen.availHeight);

 　　8.5 history对象

　　　　保存用户上网的历史记录，从窗口打开的那一刻算起。
　　　　处于安全考虑，开发人员无法获取用户浏览过的URL，但借由用户访问过的页面列表。同样可以在不知道实际URl的情况下实现后台和前进。
　　　　go()方法，可在用户的历史记录中任意跳转。
　　　　　　@传入正整数向前跳转，传入负整数向后跳转。history.go(2); //向前跳转两页
　　　　　　@转入字符串参数时，浏览器会跳转到历史记录中包含该字符串的(最近的位置)第一个位置(前进或后退)。history.go("site.net");
　　　　　　@back()和forward()能够实现后退和前进。
　　　　history对象有一个length属性，保存着所有 向后或向前的历史记录 的数量。
　　　　　　@对于加载到窗口、标签页 或 框架的第一个页面，history.length等于0。【可以此判断用户是否一开始就打开你的页面】
　　　　history对象虽然不常用，但在创建自定义“后退”和“前进”按钮，和检测当前页是不是历史记录中的第一个页面时，必须用到它。