DOM方法:
父窗口操作IFRAME:window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document
jquery方法:
在父窗口中操作 选中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对象。
例子:
主页面
<title>主页面</title> <script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> function showSubValue(){ //var v = window.frames[0].document.getElementById("subdiv1").innerHTML; //alert(v); var o = $(window.frames[0].document).find(":div#subdiv1"); alert(o.html()); } </script> </head> <body> <div id="mainDiv">主页面测试数据</div> <input type="button" value="查看子页面数据" onclick="showSubValue();"/> <iframe src="sub.html" width="300" height="300"></iframe> </body> </html>
子页面:
<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script> <title>子页面</title> <script type="text/javascript"> function showMainValue(){ //dom方式 //var v = window.parent.document.getElementById("mainDiv").innerHTML; //alert(v); //window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据"; //jquery方式 var o = $(window.parent.document).find(":div#mainDiv"); alert(o.html()); } </script> </head> <body> <div id="subdiv1">子页面测试数据</div> <input type="button" value="显示父页面数据" onclick="showMainValue();"/> </body> </html>
http://my.oschina.net/heguangdong/blog/14988