[浪峰转载]Jquery 取得 iframe 中元素的几种方法
iframe 在复合文档中经常用到,利用 jQuery 操作 iframe 可以大幅提高效率,这里收集一些基本操作

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">

1.在父窗口中操作 选中 IFRAME 中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");
2.在 IFRAME 中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
iframe 框架的:

01  
02 <HTML xmlns="http://www.w3.org/1999/xhtml">    
03 <HEAD>    
04          
05     <MCE:SCRIPT mce_src="js/jquery-1.2.6.js" src="../js/jquery-1.2.6.js" type="text/ecmascript"></MCE:SCRIPT>    
06     <MCE:SCRIPT type="text/javascript"><!--   
07     
08         $(function(){    
09             $("#t1").hover(function(){alert('');});    
10             //$("iframe").contents().find("body").append("I'm in an iframe!");     
11             //$(window.frames["iframe1"].document).find("input[@type='text']").attr("size","30px");    
12             //$("#iframe1").contents().find("#d1").css('color','red');    
13             //$(window.frames["iframe1"].document).find("input[@name='t1']").css({background:"#369"});    
14             //$("#iframe1").src("test.html");    
15         });    
16         
17 // --></MCE:SCRIPT>    
18      
19      
20 <DIV>    
21 <INPUT id=t1>    
22 <IFRAME id=iframe1 src="child.htm" mce_src="child.htm"></IFRAME>    
23 <IFRAME height=100 src="child.htm" width=300 mce_src="child.htm"></IFRAME>    
24 </DIV>    
25 <DIV>    
26 </DIV>

收集利用 jQuery 取得 iframe 中元素的几种方法 :

Js 代码

$(document.getElementById('iframeId').contentWindow.document.body).htm()

显示 iframe 中 body 元素的内容。

Js 代码


$("#testId", document.frames("iframename").document).html();

根据 iframename 取得其中 ID 为"testId"元素

Js 代码


$(window.frames["iframeName"].document).find("#testId").html()

作用同上

收集网上的一些示例:

用 jQuery 在 IFRAME 里取得父窗口的某个元素的值

只好用 DOM 方法与 jQuery 方法结合的方式实现了

1.在父窗口中操作 选中 IFRAME 中的所有单选钮
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true");

2.在 IFRAME 中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");

iframe 框架的:

IE7 中测试通过

使用 jQuery 操作 iframe

1、 内容里有两个 ifame

leftiframe 中 jQuery 改变 mainiframe 的 src 代码:
$("#mainframe",parent.document.body).attr("src","http://www.radys.cn")

2、 如果内容里面有一个 ID 为 mainiframe 的 ifame