HTML框架IFrame结合JS在主页面和子页面间传值

Posted 2021-12-04 zcyou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML框架IFrame结合JS在主页面和子页面间传值相关的知识，希望对你有一定的参考价值。

下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数仅需 [ parent.window.你的函数 ] 就可以了

DOM方法：
父窗口操作IFRAME：window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document

jquery方法:
在父窗口中操作选中IFRAME中的所有输入框： $(w i n d o w . f r a m e s [" i f r a m e S o n "] . d o c u m e n t) . f i n d (” : t e x t ”); 在 I F R A M E 中操作选中父窗口中的所有输入框：$

例如：

主页面

 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

以上是关于HTML框架IFrame结合JS在主页面和子页面间传值的主要内容，如果未能解决你的问题，请参考以下文章

一个页面可以用多个iframe吗

iframe页面 JS问题.加载了不执行或者没完全加载如何解决

子页面是啥意思

使用iframe父页面调用子页面和子页面调用父页面的元素与方法

如何让iframe框架和主页面共用一个滚动条(也称为：iframe高度自适应问题)

iframe父页面和子页面获取元素和js变量