HTML框架IFrame结合JS在主页面和子页面间传值
下面主頁面和子頁面互相傳值的DEMO?如果僅僅需要子頁面觸發(fā)主頁面的函數(shù)?僅需?[?parent.window.你的函數(shù)?]?就可以了
?
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對象)轉(zhuǎn)換成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">主頁面測試數(shù)據(jù)</div> 21 <input type="button" value="查看子頁面數(shù)據(jù)" 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 = "修改后的主頁面數(shù)據(jù)"; 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" >子頁面測試數(shù)據(jù)</div> 24 <input type="button" id="zhe" value="顯示父頁面數(shù)據(jù)" onclick="showMainValue();"/> 25 </body> 26 </html>?--------------------轉(zhuǎn)自：https://www.cnblogs.com/lyggqm/p/5691480.html
轉(zhuǎn)載于:https://www.cnblogs.com/Zcyou/p/10919665.html
總結(jié)
以上是生活随笔為你收集整理的HTML框架IFrame结合JS在主页面和子页面间传值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何开发主从报表
- 下一篇： 线性表的顺序存储——顺序存储结构的抽象实