html iframe 页面传值

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

问题是这样的：在iframe中使用了一个弹出层插件，但弹出层仅限于在iframe页面，无法弹出到父页面。

于是乎问题就产生了：

     1、如何在iframe页面调用父页面的弹出层函数将iframe页面的表单内容弹出来。

     2、表单内容填写完成提交后又如何将数据返回iframe页面进行处理。

父页面代码片段如下：

view source

print ?

01	<script type="text/javascript">

02

03	function pframe(p){

04	$.ligerDialog.open({ content:p,width:400, height: 200, isResize: true });

05

}

06

07

</script>

08

09	<!--此处为父页面内的iframe-->

10	<iframe src="standard_iframe_test.html" name="cframe" frameborder="0"></iframe>

iframe页面(standard_iframe_test.html)代码片段如下：

view source

print ?

01	<script type="text/javascript">

02

03	function dataBack(p){

04	alert(jsonstr(p));

05

}

06

07

</script>

08

09

10

<!--按钮-->

11	<a class="standard_button1"  onclick="window.parent.pframe($('#target_div').html());">打开表单</a>

12

13	<!--target_div 即为父页面需要弹出的表单-->

14

15	<div id="target_div" style="display:none;">

16

17	<form action="" class="standard_form" id="cform">

18	输入用户昵称:<input type="text"  name="username">

19	<a  onclick="window.frames['cframe'].dataBack($('#cform').serializeArray());">保存</a>

20

</form>

21

22

</div>

【解决方案】：

οnclick=" window.parent.pframe($('#target_div').html());" //调用父页面的函数

οnclick=" window.frames['cframe'].dataBack($('#cform').serializeArray());"//调用iframe内的函数