本文整理 JavaScript 中 iframe 框架编程的核心知识，详细讲解如何利用 window.frames 集合引用子框架，通过 parent 和 top 属性实现父子及兄弟框架间的互相访问。文章包含获取框架对象、跨层级调用函数以及判断顶层框架的具体代码示例，适用于需要多窗口交互的 Web 开发场景。
iframe 框架引用基础与语法
在近期的多个项目开发中，频繁涉及 iframe 的使用场景。特别是在单个页面包含多个 iframe 的情况下，往往需要实现这些 iframe 之间，以及 iframe 与父窗口之间的函数互访。本文将对页面框架编程的相关技术进行系统梳理。
页面中所有的框架以集合的形式作为 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．兄弟框架间的引用
若两个框架同属于一个父框架，则它们互为兄弟框架。此时可通过父框架实现互相引用。例如，一个页面包含两个子框架：
代码如下:
<frameset rows="50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</frameset>在 frame1 中，可使用以下语句来引用 frame2：
self.parent.frames["frame2"];
4．不同层次框架间的互相引用
框架的层次是相对于顶层框架而言的。当涉及不同层次的框架时，只要明确自身所在层级以及目标框架的层级和名称，利用框架引用的 window 对象性质，即可轻松实现互相访问。例如：
self.parent.frames["childName"].frames["targetFrameName"];
5．对顶层框架的引用
与 parent 属性类似，window 对象还提供 top 属性，用于引用顶层框架。这可用于判断当前框架是否为顶层框架，具体代码如下：
代码如下:
//判断本框架是否为顶层框架
if(self==top){
//dosomething
}