JS iframe父子页面元素调用方法

最新推荐文章于 2024-09-25 15:23:45 发布

转载最新推荐文章于 2024-09-25 15:23:45 发布 · 5.9k 阅读

文章标签：

#iframe #object #javascript #html #ie

JS 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何利用Prototype JS库，在iframe内修改元素内容，并通过window对象调用父窗口的方法，实现了父子窗口间的数据交互。通过实例演示了在HTML页面中创建iframe、使用JavaScript操作DOM元素以及实现跨窗口通信的基本步骤。

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

父窗口调用子窗口
window.frames["iframe_ID"].document.getElementById("iframe_document_object").object_attribute = attribute_value
子窗口调用父窗口
parent.document.getElementById("parent_document_object").object_attribute = attribute_value

兼容IE和FF的写法

<HTML>
<HEAD>
<TITLE> Test Page </TITLE>
<script src="prototype-1.4.0.js"></script>
<script language="javascript">
function show(){
//改变iframe中的元素id为myH1的内容
window.frames["iframe_text"].document.getElementById("myH1").innerHTML = "http://www.pint.com";
}
</script>
</HEAD>
<BODY>
<iframe height="350" width="600" src="iframe_text.htm"
name="iframe_text"></iframe>
<form action="" method="post">
<input name="haha" id="haha" type="text" maxlength="30" value="haha"
/><br />
<textarea cols="50" rows="5" id="getAttributeMethod"></textarea>
<input type="button" onClick="show();" value="提交"/>
</form>
<h2 id="myH2">d</h2>
</BODY>
</HTML>