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 另外一个对当前窗口的引用。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,039评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,223评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,916评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,009评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,030评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,011评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,934评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,754评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,202评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,433评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,590评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,321评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,917评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,568评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,738评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,583评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,482评论 2 352

推荐阅读更多精彩内容