iframe的父与子窗体之间的传值(IE与FF都可以用)

请看下面简单例子,不多解释.
父窗体:test.htm
<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>


iframe的页面内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script language="javascript">
function show(){
//改变父窗体中的元素id为myH2的内容
parent.document.getElementById("myH2").innerHTML =
"http://www.adsf.com";


}


</script>
<body>
<h1 id="myH1">ha</h1>
<form action="" method="post">
<input name="abc" id="abc" type="text" maxlength="30" value="abc" /><br
/>
<textarea cols="50" rows="10" id="text"></textarea> <br />
<input type="button" value="提交" onclick="show();"/>
</form>
</body>
</html>
在使用iframe时,父页面向子页面传值的方法如下所示:在父页面的JS代码中,可以通过postMessage函数向子页面发送消息。该函数需要两个参数,即key和value,分别表示字段名和值。首先,通过获取iframe元素,然后使用contentWindow属性获取iframe的contentWindow对象。接着,调用postMessage函数,将要传递的数据以对象的形式传入,对象的key对应字段名,value对应值。具体代码如下所示:postMessage: function (key, value) { let iframe = $('iframe')[0]; if (iframe) { iframe.contentWindow.postMessage({ 'key': key, 'value': value }, iframe.src); } }。这样,父页面就能够向子页面传递值了。 [2<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [iframe 父子页面之间传值](https://blog.csdn.net/Caocui_/article/details/122664544)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [JS父页面与子页面相互传值方法](https://download.csdn.net/download/weixin_38631738/13049741)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值