问题是这样的:在iframe中使用了一个弹出层插件,但弹出层仅限于在iframe页面,无法弹出到父页面。
于是乎问题就产生了:
1、如何在iframe页面调用父页面的弹出层函数将iframe页面的表单内容弹出来。
2、表单内容填写完成提交后又如何将数据返回iframe页面进行处理。
父页面代码片段如下:
01 | < script type = "text/javascript" > |
04 | $.ligerDialog.open({ content:p,width:400, height: 200, isResize: true }); |
10 | < iframe src = "standard_iframe_test.html" name = "cframe" frameborder = "0" ></ iframe > |
iframe页面(standard_iframe_test.html)代码片段如下:
01 | < script type = "text/javascript" > |
11 | < a class = "standard_button1" onclick = "window.parent.pframe($('#target_div').html());" >打开表单</ a > |
15 | < div id = "target_div" style = "display:none;" > |
17 | < form action = "" class = "standard_form" id = "cform" > |
18 | 输入用户昵称:< input type = "text" name = "username" > |
19 | < a onclick = "window.frames['cframe'].dataBack($('#cform').serializeArray());" >保存</ a > |
【解决方案】:
οnclick="
window.parent.pframe($('#target_div').html());" //调用父页面的函数
οnclick="
window.frames['cframe'].dataBack($('#cform').serializeArray());"//调用iframe内的函数