《JavaScript高级程序设计》读书笔记--8-BOM

BOM。浏览器对象模型，提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

window对象

BOM的核心对象是window，表示浏览器的一个实例。
全局作用域
在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。
尝试访问未声明变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。
窗口关系及框架
如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右、从上到下）或者框架名称来访问相应的window对象。每个window对象都有一个name属性，其包含框架的名称。
下图展示了在最高层窗口中，通过代码来访问前面例子中每个框架的不同方式。
框架访问
窗口位置
以下代码可以跨浏览器取得窗口左边和上边的位置

var leftPos = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;

moveTo()和moveBy()方法可以将窗口精确的移动到一个新位置。moveTo()接收的是新位置的x和y坐标值，moveBy()接收的是在水平和垂直方向上移动的像素数。

//将窗口移动到屏幕坐上角
window.moveTo(0,0);
//将窗口向下移动100像素
window.moveBy(0,100);
//将窗口移动到（200，300）
window.moveTo(200,300);
//将窗口左移50像素
window.moveBy(-50,0);

z这两种方法可能会被浏览器禁用，也不适用于框架，只能对最外层的window对象使用。
窗口大小
outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层的window对象还是从某个框架访问）。innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。
resizeTo(）和resizeBy()方法可以调整浏览器窗口的大小。resizeTo接收浏览器窗口的新宽度和新高度，resizeBy接收新窗口与原窗口的宽度和高度之差。

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

可能会被浏览器禁用，也不适用于框架，只能对最外层window对象使用。
导航和打开窗口
使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

//等同于<a href="http://www.wrox.com" target="topFrame">
window.open("http://www.wrox.com","topFrame");

弹出窗口
如果给window.open()传递的第二个参数并不是一个已经存在的窗口或者框架，那么该方法会根据第三个参数位置上传递的字符串创建一个新窗口或者新标签页。若没有第三个参数，就会打开一个新浏览器窗口，在不打开新窗口的情况下，会忽略第三个参数。
window.open的第三个参数
window.open()打开的窗口可以通过close()方法关闭。
间歇调用和超时调用
js是单线程语言，但他允许通过设置超时值和间歇时间来调度代码在特定时刻执行。前者是在指定的时间过后执行代码，后者则是在每隔指定时间就执行一次代码。
超时调用需要使用window对象的setTimeout()方法，它接收两个参数：需要执行的代码和以毫秒表示的时间（即在执行代码前需要等待多少毫秒数）。其中，第一个参数可以是一个包含js代码的字符串（就和eval（）函数中使用的字符串一样），也可以是一个函数。

setTimeout("alert('hello')",1000);
//不建议传递字符串
setTimeout(function(){
    aler("hello");
},1000);
//推荐使用这种方法

js是单线程的解释器，因此一定时间内只会执行一段代码，所以可能会导致经过指定时间后指定的代码也不一定会执行，这些任务会按照他们添加到队列的顺序执行，如果队列是空，则代码会立即执行，如果不为空，那么就要等待前面的代码执行完成以后在执行。
调用setTimeout之后会返回一个数值ID，表示超时调用，他是计划执行代码的唯一标识符，可以通过他调用clearTimeout方法来取消相应的超时调用。

//设置超时调用
var timeoutId = setTimeout(function(){
    alert("hello");
},1000);
//注意：把他取消
clearTimeout(timeoutId);

间歇调用与超时调用类似，只不过他会按照指定的时间间隔重复执行代码，直至调用被取消或者页面被卸载。其调用的方法是setInterval()，它接收的参数与setTimeout()相同：要执行的代码和每次执行之前需要等待的毫秒数，

setInterval(function(){
    alert("hello");
},10000);

要取消可以使用clearInterval()方法，并传入相应的间歇调用的ID。
使用超时调用来模拟间歇调用是一种最佳模式，最好不要使用间歇调用。
系统对话
浏览器通过alert()、confirm()和prompt()方法可以调用系统的对话框向用户显示消息。
还有print（）和find（）方法，与通过浏览器菜单的打印和查找命令打开的对话框相同。

location对象

location既是window对象的属性也是document对象的属性。换句话说，window.location和document.location引用的是同一个对象。
location对象的所有属性

查询字符串参数

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"]);//“jacascript”
alert(args["num"]);//“10”

位置操作

//打开新URL并在浏览器历史记录中生成一条记录
location.assign("http://www.wrox.com");
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

//假设初始URL为http://www.wrox.com/WileyCDA/
//将URL修改为http://www.wrox.com/WileyCDA/#section1
location.hash = "#section1";
//将URL修改为http://www.wrox.com/WileyCDA/?q=javascript
location.search = "?q=javascript";
//将URL修改为http://www.yahoo.com/WileyCDA/
location.hostname = "www.yahoo.com";
//将URL修改为http://www.yahoo.com/mydir/
location.pathname = "mydir";
//将URL修改为http://www.yahoo.com:8080/WileyCDA/
location.port = "8080";

每次修改location属性（hash除外），页面都会以新URL重新加载。
replace()方法可以导航到指定的URL而不会在浏览器的历史记录中生成新的记录，所以，也不会有后退按钮返回到前一个页面。
reload()方法作用是重新加载当前显示的页面，不传递任何参数时，页面会以最有效的方式重新加载，也就是说页面会从浏览器的缓存中重新加载。若要强制从服务器重新加载，则要传入参数true。

location.reload();//重新加载（有可能从缓存中加载）
location.reload(true);//重新加载（从服务器重新加载）

最好将reload()放置在代码的最后一行。

navigator对象

检测插件
注册处理程序

screen对象

包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。

history对象

保存这用户上网的历史记录，从窗口打开的那一刻算起。
使用go方法可以在用户的历史记录中任意跳转。它接收一个蚕食。负数表示向后跳转，正数表示向前跳转。

history.go(-1);//后退一页
history.go(2);//前进两页
history.go("wrox.com");//跳转到最近的wrox.com页面
history.back();//后退一页
history.forward();//前进一页
history.length;//保存这所有历史记录的数量，为0时，表示用户打开后的第一个页面