【解决】JS实现Iframe与父页面“函数互调/参数互传”
问题是这样的：在iframe中使用了一个弹出层插件，但弹出层仅限于在iframe页面，无法弹出到父页面。
于是乎问题就产生了：
1、如何在iframe页面调用父页面的弹出层函数将iframe页面的表单内容弹出来。
2、表单内容填写完成提交后又如何将数据返回iframe页面进行处理。
onclick="window.parent.pframe($('#target_div').html());" //调用父页面的函数
onclick="window.frames['cframe'].dataBack($('#cform').serializeArray());"//调用iframe内的函数
于是乎问题就产生了：
1、如何在iframe页面调用父页面的弹出层函数将iframe页面的表单内容弹出来。
2、表单内容填写完成提交后又如何将数据返回iframe页面进行处理。
父页面代码片段如下：
<script type="text/javascript">
function pframe(p){
$.ligerDialog.open({ content:p,width:400, height: 200, isResize: true });
}
</script>
<!--此处为父页面内的iframe-->
<iframe src="standard_iframe_test.html" name="cframe" frameborder="0"></iframe>
iframe页面(standard_iframe_test.html)代码片段如下：
<script type="text/javascript">
function dataBack(p){
alert(jsonstr(p));
}
</script>
<!--按钮-->
<a class="standard_button1" onclick="window.parent.pframe($('#target_div').html());">打开表单</a>
<!--target_div 即为父页面需要弹出的表单-->
<div id="target_div" style="display:none;">
<form action="" class="standard_form" id="cform">
输入用户昵称:<input type="text" name="username">
<a onclick="window.frames['cframe'].dataBack($('#cform').serializeArray());">保存</a>
</form>
</div>
【解决方案】：
onclick="window.parent.pframe($('#target_div').html());" //调用父页面的函数
onclick="window.frames['cframe'].dataBack($('#cform').serializeArray());"//调用iframe内的函数
阅读本文后，您的心情是：
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注
