JavaScript中top、parent与frame对象详解及frameset嵌套应用

top与parent对象的区别

top变量始终指向浏览器窗口中最高层级的窗口。当需要从最顶层窗口执行操作或命令时，应使用top变量进行引用。

parent变量代表包含当前分割窗口的父窗口。若窗口存在多层嵌套结构，例如第二层分割窗口被包含在另一个分割窗口中，则可通过parent变量引用其直接父级分割窗口。

补充说明：Window、Parent、Frame、Document及Form对象之间存在明确的层级继承关系。

对象层级顺序为：Windwo对象→Parent对象→Frame对象→Document对象→Form对象。

具体访问路径示例：parent.frame1.document.forms[0].elements[0].value;

在JavaScript中，window.location（或window.location.href）与window.top.location（或window.top.location.href）具有相同的功能。由于top指向最外层的frameset，因此可以通过它调用内部任意子frame，例如top.outterFrame1.location或top.innerFrame2.location。

parent指向当前窗口（frame）的父级frameset，同样可以调用其内部任意子frame，例如parent.innerFrame1.location或parent.innerFrame2.location。

 
<html>
<head>
<title>top frame parent示例</title>
<script language="javaScript" type="text/javaScript">
window.location.href="http://www.baidu.com/";
</script>
</head>
<frameset id="outFrameset" rows="150,*,150" cols="*" border="5">
<frame name="frameName1" id="frameId1" src="a.html">
<frameset id="inFrameset" cols="150,*" rows="*">
<frame name="innerFrameName1" id="innerFrameId1" src="a.html">
<frame name="innerFrameName2" id="innerFrameId2" src="a.html">
</frameset>
<frame name="frameName2" id="frameId2" src="a.html">
</frameset>
</html>