JavaScript框架编程:window对象与框架引用详解

作者:代码拾荒

时间:2026-10-22

浏览:526

本文详解JavaScript中框架(Frame)与window对象的关系,阐述如何通过window.frames集合、parent及top属性实现父子、兄弟及多层级框架间的互相引用,并解析全局变量与函数在不同框架中的作用域问题。

文章目录

JavaScript框架编程:window对象与框架引用详解

使用JavaScript框架


在讲解 window 对象时曾提及,框架内的网页同样被视为 window 对象,即 Frame 对象本质上也是 window 对象。通俗而言,每个 HTML 文件都对应一个独立的 window 对象,包括定义框架的主页(即“框架网页”)。在 IE 浏览器中,通过 <iframe> 标签插入的框架也是 window 对象;然而,通过“包含网页”方式(HTML中显示为“<!--webbot bot="include" ...-->”)读取的 HTML 并不占用独立的 window 对象。每个框架都是包含它的页面的 window 对象的子对象(可视为属性),引用方式包括以下几种:


window.frames[x]


window.frames['frameName']


window.frameName



其中,x 表示该 window 对象中指定的第几个框架,与其他数组类似,x 从零开始计数。frameName 表示框架的名称,与 <frame> 标签中的“name”属性一致。



若通过 window.frameName 引用的 window 对象本身也是一个框架网页,则引用其子框架的方法为:window.frameName.subFrameName。依此类推。



需注意,无论在哪引用“window”对象,返回的都是“当前” window 对象。若要访问其他 window 对象,需使用 parent 和 top 属性。parent 表示“父级” window 对象,即包含当前 window 对象的框架网页;top 表示窗口最顶端的 window 对象。



使用框架时还需密切关注 JavaScript 中定义的全局变量和自定义函数,它们均有所属——所在的 window 对象。要引用其他框架中的全局变量或自定义函数,需采用“窗口对象.框架对象[.框架对象…].全局变量或自定义函数”这种较为繁琐的方法。



此问题在建立连接时常被忽略:若在 <head> 中定义了默认目标窗口(<base target="...">),在 <a href="javascript:..."> 中,需知晓输入的 JavaScript 语句是在默认目标窗口中运行的,必要时需添加“parent”“top”属性。



框架编程概述

框架编程概述


一个 HTML 页面可包含一个或多个子框架,这些子框架以 <iframe> 标记,用于显示独立的 HTML 页面。本文所述的框架编程涵盖框架的自我控制及框架间的互相访问,例如从一个框架中引用另一个框架中的 JavaScript 变量、调用其他框架内的函数、控制另一个框架中表单的行为等。


框架间的互相引用

框架间的互相引用


页面中的所有框架以集合形式作为 window 对象的属性提供,例如:window.frames 表示该页面内所有框架的集合,这与表单对象、链接对象、图片对象类似,不同的是,这些集合是 document 的属性。因此,引用子框架可使用如下语法:


window.frames["frameName"];


window.frames.frameName


window.frames[index]



其中,window 字样也可用 self 代替或省略。假设 frameName 为页面中第一个框架,则以下写法等价:


self.frames["frameName"]


self.frames[0]


frames[0]


frameName



每个框架对应一个 HTML 页面,因此该框架也是一个独立的浏览器窗口,具有窗口的所有性质。所谓对框架的引用,即是对 window 对象的引用。拥有此 window 对象后,可方便地对其中的页面进行操作,例如使用 window.document 对象向页面写入数据、使用 window.location 属性来改变框架内的页面等。


下面分别介绍不同层次框架间的互相引用:



1.父框架到子框架的引用


了解上述原理后,从父框架引用子框架变得非常容易,即:


window.frames["frameName"];



这样便引用了页面内名为 frameName 的子框架。若要引用子框架内的子框架,根据引用的框架实际就是 window 对象的性质,可实现如下:


window.frames["frameName"].frames["frameName2"];



这样便引用到了二级子框架,依此类推,可实现多层框架的引用。



2.子框架到父框架的引用


每个 window 对象都有一个 parent 属性,表示它的父框架。如果该框架已是顶层框架,则 window.parent 还表示该框架本身。



3.兄弟框架间的引用


若两个框架同为一个框架的子框架,它们称为兄弟框架,可通过父框架来实现互相引用。例如一个页面包括 2 个子框架:


<frameset rows="50%,50%">


<frame src="1.html" />


<frame src="2.html" />


</frameset>



在 frame1 中可使用如下语句来引用 frame2:


self.parent.frames["frame2"];



4.不同层次框架间的互相引用


框架的层次是针对顶层框架而言的。当层次不同时,只要知道自己所在的层次以及另一个框架所在的层次和名字,利用框架引用的 window 对象性质,可很容易地实现互相访问,例如:


self.parent.frames["childName"].frames["targetFrameName"];



5.对顶层框架的引用


与 parent 属性类似,window 对象还有一个 top 属性。它表示对顶层框架的引用,这可以用来判断一个框架自身是否为顶层框架,例如:


//判断本框架是否为顶层框架


if(self==top){


//dosomething


}


1

2下一页阅读全文

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章