iframe父页面与子页面之间的传值问题
Posted 晚`枫
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe父页面与子页面之间的传值问题相关的知识,希望对你有一定的参考价值。
一、父页面给iframe中的子页面传值,把值写入子页面的文本框里
father.html
<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function fuzhi()
{
$(‘#son‘).contents().find("#b").val("父页面传过来的值!");
}
</script>
<script type="text/javascript">
function fuzhi()
{
$(‘#son‘).contents().find("#b").val("父页面传过来的值!");
}
</script>
<iframe id="son" name="son" src="son.html" width="400" height="200"></iframe><br />
<input type="button" value="给子页面表单中id为b的文本框赋值" onclick="fuzhi()" />
son.html
<form name="form2"><input type="text" name="b" id="b" /></form>
二、子页面如何调用父页面中的函数
father.html
<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function fun()
{
alert(‘这是父页面中的函数弹出窗口哦!‘);
}
</script>
<iframe id="son" name="son" src="son.html" width="400" height="200"></iframe>
<script type="text/javascript">
function fun()
{
alert(‘这是父页面中的函数弹出窗口哦!‘);
}
</script>
<iframe id="son" name="son" src="son.html" width="400" height="200"></iframe>
son.html
<script type="text/javascript">
function diaoyong()
{
$(window.parent.fun()); //调用父页面函数
}
</script>
<form name="form2"> <input name="btn1" type="button" onclick="diaoyong()" value="调用父页面中的函数" /></form>
function diaoyong()
{
$(window.parent.fun()); //调用父页面函数
}
</script>
<form name="form2"> <input name="btn1" type="button" onclick="diaoyong()" value="调用父页面中的函数" /></form>
三、iframe中的子页给父页面传值
father.html
<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>
<div id="messagediv">test</div>
<iframe id="son" name="son" src="son.html" width="400" height="200">
</iframe>
<div id="messagediv">test</div>
<iframe id="son" name="son" src="son.html" width="400" height="200">
</iframe>
son.html
<script type="text/javascript">
function fuzhi()
{
$(window.parent.$("#messagediv").html("子页面赋过来的值"));
}
</script>
<form name="form2"><input name="btn1" type="button" onclick="fuzhi()" value="给父页中id为messagediv的元素赋值" /></form>
function fuzhi()
{
$(window.parent.$("#messagediv").html("子页面赋过来的值"));
}
</script>
<form name="form2"><input name="btn1" type="button" onclick="fuzhi()" value="给父页中id为messagediv的元素赋值" /></form>
以上是关于iframe父页面与子页面之间的传值问题的主要内容,如果未能解决你的问题,请参考以下文章