解析Jquery取得iframe中元素的幾種方法

iframe在復合文檔中經常用到利用jquery操作iframe可以大幅提高效率這裡收集一些基本操作需要的朋友可以參考下

　　DOM方法
父窗口操作IFRAMEwindowframes["iframeSon"]document
IFRAME操作父窗口: windowparentdocument
jquery方法:
在父窗口中操作選中IFRAME中的所有輸入框 $(windowframes["iframeSon"]document)find(":text");
在IFRAME中操作選中父窗口中的所有輸入框$(windowparentdocument)find(":text");
iframe 框架的HTML<iframe src="testhtml" id="iframeSon" width="″ height="″ frameborder="″ scrolling="auto"></iframe>

　　在父窗口中操作選中IFRAME中的所有單選鈕
$(windowframes["iframe"]document)find("input[@type=radio]")attr("checked""true");

　　在IFRAME中操作選中父窗口中的所有單選鈕
$(windowparentdocument)find("input[@type=radio]")attr("checked""true");
iframe框架的
<iframe src="testhtml" id="iframe″ width="″ height="″ frameborder="″ scrolling="auto"></iframe>

復制代碼代碼如下:
<HTML xmlns="
<HEAD>
     <MCE:SCRIPT mce_src="js/jqueryjs" src="/js/jqueryjs" type="text/ecmascript"></MCE:SCRIPT>
     <MCE:SCRIPT type="text/javascript"><!

         $(function(){
             $("#t")hover(function(){alert();});
             //$("iframe")contents()find("body")append("Im in an iframe!");
             //$(windowframes["iframe"]document)find("input[@type=text]")attr("size""px");
             //$("#iframe")contents()find("#d")css(colorred);
             //$(windowframes["iframe"]document)find("input[@name=t]")css({background:"#"});
             //$("#iframe")src("testhtml");
         });

// ></MCE:SCRIPT>
<DIV>
<INPUT id=t>
<IFRAME id=iframe src="childhtm" mce_src="childhtm"></IFRAME>
<IFRAME height= src="childhtm" width= mce_src="childhtm"></IFRAME>
</DIV>
<DIV>
</DIV>

　　
收集利用Jquery取得iframe中元素的幾種方法 :

復制代碼代碼如下:
$(documentgetElementById(iframeId)contentWindowdocumentbody)htm()

　　
顯示iframe中body元素的內容

復制代碼代碼如下:
$("#testId" documentframes("iframename")document)html();

　　
根據iframename取得其中ID為"testId"元素

復制代碼代碼如下:
$(windowframes["iframeName"]document)find("#testId")html()

　　
作用同上

收集網上的一些示例
用jQuery在IFRAME裡取得父窗口的某個元素的值
只好用DOM方法與jquery方法結合的方式實現了

　　在父窗口中操作選中IFRAME中的所有單選鈕
$(windowframes["iframe"]document)find("input[@type=radio]")attr("checked""true");

　　在IFRAME中操作選中父窗口中的所有單選鈕
$(windowparentdocument)find("input[@type=radio]")attr("checked""true");
iframe框架的<iframe src="testhtml" id="iframe" width="" height="" frameborder="" scrolling="auto"></iframe>
IE中測試通過

使用jquery操作iframe
內容裡有兩個ifame
<iframe id="leftiframe"</iframe>
<iframe id="mainiframe</iframe>
leftiframe中jQuery改變mainiframe的src代碼
$("#mainframe"parentdocumentbody)attr("src""

　　如果內容裡面有一個ID為mainiframe的ifame
<iframe id="mainifame"></ifame>
ifame包含一個someID
<div id="someID">you want to get this content</div>
得到someID的內容
$("#mainiframe")contents()find("someID")html() html 或者 $("#mainiframe")contains()find("someID")text()值

　　在父窗口中操作選中IFRAME中的所有單選鈕
$(windowframes["iframe"]document)find("input[@type=radio]")attr("checked""true");
那選擇id自然就是依然使用find方法
$(windowframes["iframe"]document)find("#id")

如上面所示
leftiframe中的jQuery操作mainiframe的內容someID的內容
$("#mainframe"parentdocumentbody)contents()find("someID")html() 或者 $("#mainframe"parentdocumentbody)contents()find("someID")val()

使用JavaScript操縱iframe
框架間的互相引用
一個頁面中的所有框架以集合的形式作為window 對象的屬性提供例如windowframes就表示該頁面內所有框架的集合這和表單對象鏈接對象圖片對象等是類似的不同的是這些集合是 document的屬性因此要引用一個子框架可以使用如下語法
windowframes["frameName"];
windowframesframeName
windowframes[index]
其中window字樣也可以用self代替或省略假設frameName為頁面中第一個框架則以下的寫法是等價的 selfframes["frameName"]
selfframes[]
frames[]
frameName
每個框架都對應一個HTML頁面所以這個框架也是一個獨立的浏覽器窗口它具有窗口的所有性質所謂對框架的引用也就是對window對象的引用有了這個window對象就可以很方便地對其中的頁面進行操作例如使用windowdocument對象向頁面寫入數據使用 windowlocation屬性來改變框架內的頁面等

　　下面分別介紹不同層次框架間的互相引用
．父框架到子框架的引用
知道了上述原理從父框架引用子框架變的非常容易即
windowframes["frameName"];
這樣就引用了頁面內名為frameName的子框架如果要引用子框架內的子框架根據引用的框架實際就是window對象的性質可以這樣實現
windowframes["frameName"]frames["frameName"];
這樣就引用到了二級子框架以此類推可以實現多層框架的引用

　　．子框架到父框架的引用
每個window對象都有一個parent屬性表示它的父框架如果該框架已經是頂層框架則windowparent還表示該框架本身

　　．兄弟框架間的引用
如果兩個框架同為一個框架的子框架它們稱為兄弟框架可以通過父框架來實現互相引用例如一個頁面包括個子框架
<frameset rows="%%">
<frame src="html" name="frame" />
<frame src="html" name="frame" />
</frameset>
在frame中可以使用如下語句來引用frame
selfparentframes["frame"];

　　．不同層次框架間的互相引用
框架的層次是針對頂層框架而言的當層次不同時只要知道自己所在的層次以及另一個框架所在的層次和名字利用框架引用的window對象性質可以很容易地實現互相訪問例如
selfparentframes["childName"]frames["targetFrameName"];

　　．對頂層框架的引用
和parent屬性類似window對象還有一個top屬性它表示對頂層框架的引用這可以用來判斷一個框架自身是否為頂層框架例如
//判斷本框架是否為頂層框架
if(self==top){
//dosomething
}

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20115.html