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> 

<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>

son.html

<script type="text/javascript"> 
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>

son.html

<script type="text/javascript"> 
function fuzhi() 
{ 
    (window.parent.(window.parent.("#messagediv").html("子页面赋过来的值")); 
} 
</script> 
<form name="form2"><input name="btn1" type="button" onclick="fuzhi()" value="给父页中id为messagediv的元素赋值" /></form>

---

还有一个最笨的方法，也是一个最有效的方法

就是通过事件改变iframe的src值如

<iframe class="J_iframe" name="iframe0" width="100%" height="100%" src="addShow" frameborder="0" data-id="/sale/addShow" seamless></iframe>

 $("#button").click(function (id) {
        $("#iframe-upd").prop("src","updShow?id="id);
    });

转载于 https://www.cnblogs.com/daijun/p/6102599.html

侵权联系立删