【解决】JS实现Iframe与父页面“函数互调/参数互传”

问题是这样的：在iframe中使用了一个弹出层插件，但弹出层仅限于在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内的函数