window对象---- parent和top属性用于框架设计

本文链接：https://blog.youkuaiyun.com/zhaobao110/article/details/5866801

本文详细介绍了JavaScript中的parent和top属性在框架设计中的应用。这两个属性分别表示当前框架的父框架和最顶层框架。通过示例，解释了如何在不同框架间进行信息交互，包括如何访问和修改不同框架中的表单元素。文中提供了一个包含三层框架的实例，演示了如何在这些框架之间动态更新内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在使用属性的时候一定要明白他所指的对象是什么，在项目中看到别人的代码中用了window.top.框架页的name不太明白什么意思，然后去网上查了查，还真有点不太好理解呢，下面具体说一下他们两个具体区别。

parent和top属性也可用于框架文档，分别表示当前框架的父框架和当前框架的最顶层框架。

例如，一个浏览器窗口分为上下两部分 ---- 框架A和框架B，而框架B又分为框架B1和框架B2两个子框架；此时框架A和框架B的parent与它们的top相同，都是最顶层窗口，框架B1和框架 B2的parent是框架B，而所有框架的top都是最顶层的窗口。

可以用下面的方式访问不同框架中的表单：

parent.frames[索引值1].document.forms[索引值2]

或：

  top.frames[索引值1].document.forms[索引值2]

还可以使用框架名和窗体名来实现各元素的访问：

  parent.框架名.document.表单名.表单中的元素名.属性或方法

因为frames是window的数组属性，所以可以用parent.frames.length确定窗口的数目

可以使用document.forms[ ]访问窗体中的表单对象。而要实现框架中多窗体的不同元素的访问，则必须使用window对象中的frames属性。frames属性同样也是一个数组，它在父框架集中为每一个子框架设有一项。

二、范例

下面我们通过一个具体的实例，来说明利用JavaScript脚本在Web中实现更为复杂的信息交互的方法。

该例子是在一个多窗口中实现窗体信息的动态交互。
　　首先，在浏览器窗口中制作三个用于窗体交互的窗格。

chap5_3.htm为主文档，它首先将窗口划分为具有二行的框架，然后再将第二行的框架划分为具有二列的框架，内容如下：

<html>

<frameset rows = "100, *"> 
<frame src = "chap5_3_1.htm">
<frameset cols = "50%, 50%">
<frame src = "chap5_3_2.htm">
 <frame src = "chap5_3_3.htm"> 
</frameset> 
</frameset> 
</html>

其中chap5_3_1.htm的内容如下：

<html> 
<head></head>
<body> 
<h2>使用框架实现Web交互</h2>
<form name = "chap5_3_1form">
<input type = "text" name = "chap5_3_1t1" size = 50 maxlength = 50 value = "">
</form>
</body>
</html>

其中chap5_3_2.htm的内容如下：


 <html> 
<head></head>
<body>
<form name = "chap5_3_2form"> 
请选择城市：<br/> 
<select name="select1" size = "4" multiple> 
<option>云南省</option>
<option>四川省</option> 
<option>贵州省</option> 
<option>山东省</option> 
</select>
<br/> 
<hr>
<input type="button" name="moditext" value="修改上面窗口的文本框内容"  onClick = "modiText();"><br/> 
<input type="button" name="modicity" value="改上面列表框中前两项为市" onClick = "modiCity();"> </form>
<script language="JavaScript">
function modiText(){ 
//使用了top
 top.frames[0].document.forms[0].chap5_3_1t1.value = "这是通过下面按钮修改的";    
 
} 
function modiCity(){ 
        //修改本窗口的内容不必加top或parent        
         document.forms[0].select1.options[0].text = "昆明市";         document.forms[0].select1.options[1].text = "成都市";    
   } 
</script> 
</body>
</html>

这里，chap5_3_2.htm中的JavaScript脚本将所示的“云南省”和“四川省”分别改为“昆明市”和“成都市”。
chap5_3_3.htm为第三框架文档，内容如下：

<html> 
<head> </head>
 <body>
 <form name="chap5_3_3form"> 请输入用户名：    
 <input type="text" name="chap5_3_3text1" value="" size = 12><br/>
 请选择：   
 <input type = "Checkbox" name = "checkbox1" value = "qb">全部信息<br/> 
<input type = "Checkbox" name = "checkbox2" value = "bf">部分信息<br/>
 <input type = "Checkbox" name = "checkbox3" value = "sy">所有城市<br/> <hr> 
<input type = "button" name = "modicity" value="改左边页面列表框前两项为县" onClick = "modiCity();"><br/>

<input type = "button" name = "xiugai" value = "修改本窗口复选框"  onClick = "modiCheck();"><br> 
</form>
<script language="JavaScript">
 function modiCity(){ 
//修改另外窗口的需要加top或parent
 parent.frames[1].document.forms[0].select1.options[0].text = "南昌县"; top.frames[1].document.chap5_3_2form.elements[0].options[1].text = "淅川县"; 
}
function modiCheck(){ 
 parent.frames[2].document.chap5_3_3form.elements[0].value = "劳动和社会保障"; document.chap5_3_3form.elements[1].checked=true; document.chap5_3_3form.elements[2].checked=true; document.chap5_3_3form.elements[3].checked=false; 
}
 </script>
 </body>
 </html>