2018-12-10
第8章 BOM
ECMAScript是Javascript的核心，但如果要在web中使用Javascript，那么BOM（浏览器对象模型）则无疑才是真正的核心。
W3C为了把浏览器中的Javascript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中。
8.1 window对象
BOM的核心对象是window，它表示浏览器的一个实例。
在浏览器中，window对象有双重角色，它既是通过Javascript访问浏览器窗口的一个借口，又是ECMAScript规定的Global对象。
这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt（）等方法。
8.1.1 全局作用域
由于window对象同时扮演者ECMAScript中的Global对象的 角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法：
var age = 29;
function sayAge(){
alert(this.age);
}
alert(window.age);//29
sayAge();//29
window.sayAge();//29
定义全局变量与在window对象上直接定义属性还是有一点差别：全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以，例：
var age = 29;
window.color = "red";
//在IE<9 时抛出错误，在其他所有浏览器中都返回false
delete window.age;
//在IE>9 时抛出错误，在其他所有浏览器中都返回true
delete window.color; //return true
alert(window.age);//29
alert(window.color);//undefined
上面这段代码中的var语句添加的window属性有一个名为 [[Configurable]] 的特性，这个特性的值被设置为false，因此这样定义的属性不可以通过delete操作符删除。
IE8及更早版本在遇到使用delete删除window属性的语句时，不管该属性最初是如何创建的，都会抛出错误，以示警告。IE9及更高版本不会抛出错误。
尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在
例：
//这里抛出错误，因为oldValue未定义
var newValue = oldValue;
//这里不会抛出错误，因为这是一次属性查询
//newValue的值是undefined
var newValue = window.oldValue;
8.1.2 窗口关系及框架
如果页面中包含框架，则每个框架都用于自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，，从左至右，从上到下）或者框架名称来访问相应的window对象。每个window对象都有一个name属性，其中包含框架的名称。下面是一个包含框架的页面：
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="160,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame">
<frame src="yetanotherframe.htm" name="rightFrame">
</frameset>
</frameset>
</html>
以上代码创建了一个框架集，其中一个框架居上，两个框架居下。
对这个例子而言，可以通过window。frames[0]或者window.frames["topFrame"]来引用上方的框架。
不过最好使用top而非window来引用这些框架（例如：通过top.frames[0]）。
top对象始终指向最高（最外）层的框架，也就是浏览器窗口。使用它可以确保在一个框架中正确的访问另一个框架。
对于在一个框架中编写的任何代码来说，其中的window对象指向的都是那个框架的特定实例，而非最高层的框架。
image.png
上图展示了在最高层窗口中，通过代码来访问前面例子中的每个框架的不同方式。↑↑↑
与top相对的另一个window对象是parent。
顾名思义，parent（父）对象始终指向当前框架的直接上层框架。
在某些情况下，parent有可能等于top；但在没有框架的情况下，parent一定等于top（此时它们都等于window）。
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="100,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame">
<frame src="anotherframeset.htm" name="rightFrame">
</frameset>
</frameset>
</html>
这个框架集中的一个框架包含了另一个框架集，该框架集的代码如下所示：
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset cols="50%,50%">
<frame src="red.htm" name="redFrame">
<frame src="blue.htm" name="blueFrame">
</frameset>
</html>
浏览器在加载完第一个框架集以后会继续将第二框架集加载到rightFrame中，那么parent对象指向的就是rightFrame。
可是如果代码位于topFrame中，则parent指向的事top，因为topFrame的直接上层框架就是最外层框架。
image.png
上图展示了在将前面例子加载到浏览器之后，不同window对象的值。
与框架有关的最后一个对象是self，它始终指向window。实际上，self和window对象可以互换使用。引用self对象的目的只是为了与top和parent对象对应起来，因此它不格外包含其他值。
总结：
| Window属性 | 说明 |
|---|---|
| frames[] | 存放当前窗口中所有frame对象的数组。 |
| parent | 对父窗口的引用。始终指向当前框架的直接上层框架 |
| self | 对窗口自身的引用。self可以和window对象互换，引入它的目的是为了和top，parent对应 |
| top | 始终指向最高最外层的框架，也就是浏览器窗口。对最高级别窗口的引用，这个值通常和parent一致，除非frame中有更多的frame。 |
| window | 另外一个对当前窗口的引用。 |
