于是乎问题就产生了:
1、如何在iframe页面调用父页面的弹出层函数将iframe页面的表单内容弹出来。
2、表单内容填写完成提交后又如何将数据返回iframe页面进行处理。
父页面代码片段如下:
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)代码片段如下:
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内的函数