600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > HTML框架IFrame结合JS在主页面和子页面间传值

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

时间:2018-10-14 06:36:18

相关推荐

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

下面主页面和子页面互相传值的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:<iframesrc=”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 // /bigideaer/blog/item/780337e6af39933d2df534ff.html14 // 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>

--------------------转自:/lyggqm/p/5691480.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。