jQuery控制IFRAME

以你之姓@ 2022-09-17 10:26 129阅读 0赞

### jQuery控制IFRAME    ###

2010-01-04 10:31:28|  分类： [jQuery][]|字号 订阅

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对象。

用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框架的：  
<iframe src=”test.html” id=”iframe1″ width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>  
IE7中测试通过  
代码：

HTML语言:  [Codee\#8631][Codee_8631]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">      
**<html** xmlns="http://www.w3.org/1999/xhtml" **>**      
**<head>**      
    **<title>**jQuery控制iframe**</title>**      
    **<mce:script** type="text/ecmascript" src="../js/jquery-1.2.6.js" mce\_src="js/jquery-1.2.6.js"**></mce:script>**      
    **<mce:script** type="text/javascript"**>**  
        $(function()\{      
            $("\#t1").hover(function()\{alert('');\});      
            //$("iframe").contents().find("body").append("I'm in an iframe!");       
            //$(window.frames\["iframe1"\].document).find("input\[@type='text'\]").attr("size","30px");      
            //$("\#iframe1").contents().find("\#d1").css('color','red');      
            //$(window.frames\["iframe1"\].document).find("input\[@name='t1'\]").css(\{background:"\#369"\});      
            //$("\#iframe1").src("test.html");      
        \});      
   **</mce:script>**      
**</head>**      
**<body>**      
**<div>**      
**<input** type="text" id="t1" **/>**      
**<iframe** id="iframe1" src="child.htm" mce\_src="child.htm"**></iframe>**      
**<iframe** src="child.htm" mce\_src="child.htm" width="300" height="100"**></iframe>**      
**</div>**      
**<div>**      
**</div>**      
**</body>**      
**</html>**

[jQuery]: http://blog.163.com/cqx0510@126/blog/#m=0&t=1&c=fks_087068084082085070086081082095083081084074086085094064
[Codee_8631]: http://fayaa.com/co%3Cwbr%3Ede/view/8631/