下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数 仅需 [ parent.window.你的函数 ] 就可以了
DOM方法：
父窗口操作IFRAME：window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document
jquery方法:
在父窗口中操作 选中IFRAME中的所有输入框： (window.frames["iframeSon"].document).find(”:text”);在IFRAME中操作选中父窗口中的所有输入框：(window.frames["iframeSon"].document).find(”:text”);在IFRAME中操作选中父窗口中的所有输入框：(window.parent.document).find(”:text”);
iframe框架的HTML：<iframe src=”test.html” id=”iframeSon” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>
原理其实很简单，就是用到了$(DOM对象)转换成jquery对象。
例如：
主页面
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>主页面</title>
6 <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
7 <script type="text/javascript">
8 function showSubValue(){
9
10 alert( window.frames[0].document.getElementById("zhe").value);
11 //var v = window.frames[0].document.getElementByIdx_x("subdiv1").innerHTML;
12 //alert(v);
13 // http://hi.baidu.com/bigideaer/blog/item/780337e6af39933d2df534ff.html
14 // var o = $(window.frames[0].document).find(":div#subdiv1");
15 // alert(o.html());
16 }
17 </script>
18 </head>
19 <body>
20 <div id="mainDiv">主页面测试数据</div>
21 <input type="button" value="查看子页面数据" onclick="showSubValue();"/>
22 <iframe src="zi.html" width="300" height="300"></iframe>
23 </body>
24 </html>
子页面：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
6 <title>子页面</title>
7 <script type="text/javascript">
8 function showMainValue(){
9 //dom方式
10 var v = window.parent.document.getElementById("mainDiv").innerHTML;
11 alert(v);
12
13 window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据";
14
15
16 //jquery方式
17 // var o = $(window.parent.document).find(":div#mainDiv");
18 // alert(o.html());
19 }
20 </script>
21 </head>
22 <body>
23 <div id="subdiv1" >子页面测试数据</div>
24 <input type="button" id="zhe" value="显示父页面数据" onclick="showMainValue();"/>
25 </body>
26 </html>
--------------------转自：https://www.cnblogs.com/lyggqm/p/5691480.html
原文地址：https://www.cnblogs.com/Zcyou/p/10919665.html
时间： 2024-08-24 23:05:05