许多初学者在处理 frame 时往往会出现这样或那样的错误，其实，frame 是一个特殊的窗口类型，只要明白了他们之间的关系，可以很容易控制，本文摘译自 JavaScript 2.0-The Complete Reference 一书的英文第二版（仅摘录了对理解 frame 有直接关系的章节），文章详细介绍了 frame ，相信对新手理解 frame 会有很大帮助。
对 window 和 frame 关系的错误理解是web开发者中普遍存在的问题，从 (x) html 和 Javascript 来看，每个窗口中显示的 frame 都能很容易的控制，事实上，当一个 window 有多个 frame ， 可以通过 window.frames[] 来实现对每个独立的窗口目标的引用，一些简单却很有用的属性在下表中列举出来：
| Window 属性 | 说明 |
|---|---|
| frames[] | 存放当前窗口中所有frame对象的数组。 |
| length | 窗口 frame 的数目，和 window.frames.length 等同。 |
| name | 当前窗口的名字，自 JavaScript 1.1 起，这个值是可读写的。 |
| parent | 对父窗口的引用。 |
| self | 对窗口自身的引用。 |
| top | 对最高级别窗口的引用，这个值通常和parent一致，除非 frame 中有更多的 frame。 |
| window | 另外一个对当前窗口的引用。 |
想用 Javascript 控制 frame 最主要的是要把各自的名字和他们之间的关系弄清楚，如果你有一个叫 frames.html 的页面，页面代码如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 < SPAN class = searchword >Frames</ SPAN >et//EN" "< SPAN class = searchword >frames</ SPAN >et.dtd"> < html xmlns = "" > < head > < title >< SPAN class = searchword >FrameS</ SPAN >et Test</ title > < meta http-equiv = "content-type" content = "text/html; charset=ISO-8859-1" /> </ head > << SPAN class = searchword >frames</ SPAN >et rows="33%,*,33%"> < frame src = "framerelationship.html" name = "frame1" id = "frame1" /> < frame src="more<SPAN class = searchword >frames</ SPAN >.html" name="frame2" id="frame2" /> < frame src = "framerelationship.html" name = "frame5" id = "frame5" /> </< SPAN class = searchword >frames</ SPAN >et> </ html > |
在这种情况下，当前文档主体可以看作是三个 frame （frame1,frame2, and frame5） 的 parent ，你可以使用下面的方式取得 frame 数目：
window.frames.length
你如果在三个子 frame 中运行代码，可以用下面的方法 ：
window.parent.frames.length
或者
parent.frames.length
parent 表示一个窗体的父窗体，也可以用 top 来表示最高级别的窗体，这样可以写成 top.frames.length ，但是需要注意的是：除非你有嵌套 frame ，否则 parent 和 top 通常表示的是一个对象。
访问一个 frame ，可以用 name 或者下标的方式查询 frames 数组，parent.frames[0].name 将会输出第一个 frame 的名字，在我们的例子中就是 frame1，同样，我们也可以用 parent.frame1 或者 parent.frames["frame1"] 来实现相同的操作，记住，一个 frame 就是一个 window，知道这个，就可以使用所有Window 和 Document 的方法。
当理解了 frame 之间的关系，可以很容易的通过 parent.frames[] 操作任何 frame ，假如你有一个简单的框架页面：
| 1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 < SPAN class = searchword >Frames</ SPAN >et//EN" "< SPAN class = searchword >frames</ SPAN >et.dtd"> < html xmlns = "" > < head > < title >Two < SPAN class = searchword >Frames</ SPAN ></ title > < meta http-equiv = "content-type" content = "text/html; charset=ISO-8859-1" /> </ head > << SPAN class = searchword >frames</ SPAN >et cols="300,*"> < frame src = "navigation.html" name = "frame1" id = "frame1" /> < frame src = "content.html" name = "frame2" id = "frame2" /> </< SPAN class = searchword >frames</ SPAN >et> </ html > |
在 navigation 窗体里面，你可以通过下面的方式设置一个对 content 窗体引用的变量：
var contentFrame = parent.frames[1]; // 或者使用名称
iframe 是一个需要注意的 frame 变种，用iframe可以让你不使用框架，但是却可以嵌入页面，问题是，我们如何控制这些 iframe ？事实上，我们也可以用 frames[] 的方法，此外，如果你的 iframe 有命名，可以通过 getElementById 来操控，示例如下：
| 1 2 3 4 5 6 7 | < iframe src = "" name = "iframe1" id = "iframe1" height = "200" width = "200" ></ iframe > < form action = "#" method = "get" > < input type = "button" value="Load by <SPAN class = searchword >Frames</ SPAN > Array" onclick="< SPAN class = searchword >frames</ SPAN >['iframe1'].location='';" /> < input type = "button" value = "Load by DOM" onclick = "document.getElementById('iframe1').src='';" /> </ form > |
可以通过在链接标签里面加上 target 来将操作指向目标 frame ：