javascript的top，parent，opener,iframe

最新推荐文章于 2024-03-29 17:39:20 发布

原创最新推荐文章于 2024-03-29 17:39:20 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #javascript #function #浏览器 #input

html&&css&script 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了HTML中iframe的使用方法及与其他窗口如top、parent、opener之间的交互方式。通过具体示例，展示了如何利用document.getElementById与document.frames分别获取iframe的不同属性与内容。

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

top：分割窗口最高层次的浏览器窗口。采用如下方式进行访问：top.frames['sub_frm'].*********

parent：当前分割窗口的父窗口。采用如下方式访问：parent.document.*********

opener：指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。

iframe:在一个页面含有某个iframe，其id="iframeA" name="IframeA"，此时使用document.getElementById("IframeA")取到的是iframe标签对象，通过该对象可以获取iframe的各个属性，例如src、frameborder、style等等，但是不能获取到iframe所包含的子页面的各个对象。如果使用document.frames("IframeA")取到的是iframe组件对象，通过该对象可以获取到iframe所包含的页面的子页面的各个对象，例如子页面的window对象，但是不能获得iframe标签得各个属性，例如上面说到的src等等。请参看如下类似代码：
1.html
<script>
function check(){
    var obj1=document.getElementById("myframe");
    alert(obj1.src);
    //alert(obj1.window.document.myform.username.value);//Error
    var obj2=document.frames("myframe");
    alert(obj2.window.document.myform.username.value);
    //alert(obj2.src);//Error
}
</script>
<body onload="check()">
<iframe id="myframe" name="myframe" src="2.html" frameborder="3" style="width:300;height:200;border-width:1;border-color:red;border-style:solid"></iframe>
</body>
2.html
<body>
<form name="myform">
    用户名：<input type="text" name="username" value="test" />
</form>
</body>