JS獲取/設(shè)置iframe內(nèi)對(duì)象元素、文檔的幾種方法

1、IE專用(通過(guò)frames索引形象定位)：

代碼如下:
document.frames[i].document.getElementById('元素的ID');

2、IE專用(通過(guò)iframe名稱形象定位)：

代碼如下:
document.frames['iframe的name'].document.getElementById('元素的ID');

以上方法，不僅對(duì)iframe適用，對(duì)frameset里的frame也同樣適用。IE雖然擅于自定標(biāo)準(zhǔn)，但不得不說(shuō)它很多的設(shè)計(jì)還是比較體現(xiàn)人性化的。比如這個(gè)，它在同樣支持下面的標(biāo)準(zhǔn)路徑之外，提供了一個(gè)簡(jiǎn)潔且形象化的寫法。

3、通用方法：

代碼如下:
document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')

注意要加上contentWindow，往往出現(xiàn)問(wèn)題都是因?yàn)檫@個(gè)容易被忽略，它代表frame和iframe內(nèi)部的窗口對(duì)象。

JS獲取iframe文檔內(nèi)容

代碼如下:
<script type="text/javascript">
function getIframeContent(){  //獲取iframe中文檔內(nèi)容
 var doc;
 if (document.all){ // IE
  doc = document.frames["MyIFrame"].document;
 }else{ // 標(biāo)準(zhǔn)
  doc = document.getElementById("MyIFrame").contentDocument;
 }

 return doc.body.innerHTML;
}
</script>

注意：上面的 .contentDocument 相當(dāng)于 .contentWindow.document ！

一、需求與遇到的問(wèn)題

　　在網(wǎng)站的后臺(tái)管理中使用了iframe框架布局，包括頂部菜單、左側(cè)導(dǎo)航和主頁(yè)面。需求是：點(diǎn)擊主頁(yè)面上的一個(gè)按鈕，在頂部菜單欄的右側(cè)顯示“退出”鏈接，點(diǎn)擊可退出系統(tǒng)。

　　我的思路是：在頂部的菜單頁(yè)面放一個(gè)不可見的“退出”鏈接，當(dāng)用戶點(diǎn)擊位于iframe中的主頁(yè)面（mainPage.htm）中的按鈕時(shí)，在頂部菜單頁(yè)面的右側(cè)顯示“退出”。

　　我現(xiàn)在遇到的問(wèn)題是：如何在頁(yè)面的一個(gè)iframe子頁(yè)面（mainPage.htm）中獲取并且操作其它iframe子頁(yè)面（比如topPage.htm）中的HTML元素？

二、通過(guò)JS獲取并操作iframe中的元素來(lái)解決問(wèn)題

　　這里主要就是通過(guò)JS來(lái)操作Window對(duì)象。Window 對(duì)象表示瀏覽器中打開的窗口，如果文檔包含框架（frame 或 iframe 標(biāo)簽），瀏覽器會(huì)為 HTML 文檔創(chuàng)建一個(gè) window 對(duì)象，并為每個(gè)框架創(chuàng)建一個(gè)額外的 window 對(duì)象。

　　經(jīng)過(guò)我在網(wǎng)上查資料，找到了JS操作iframe中HTML元素的方法。示例如下。
代碼如下:
         function ShowExit() {
             //獲取iframe的window對(duì)象
             var topWin = window.top.document.getElementById("topNav").contentWindow;
             //通過(guò)獲取到的window對(duì)象操作HTML元素，這和普通頁(yè)面一樣