JS獲取并操作iframe中元素的方法
JS獲取/設(shè)置iframe內(nèi)對象元素、文檔的幾種方法
1、IE專用(通過frames索引形象定位)：
document.frames[i].document.getElementById('元素的ID');
2、IE專用(通過iframe名稱形象定位)：
document.frames['iframe的name'].document.getElementById('元素的ID');
以上方法，不僅對iframe適用，對frameset里的frame也同樣適用。IE雖然擅于自定標準，但不得不說它很多的設(shè)計還是比較體現(xiàn)人性化的。比如這個，它在同樣支持下面的標準路徑之外，提供了一個簡潔且形象化的寫法。
3、通用方法：
document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')
注意要加上contentWindow，往往出現(xiàn)問題都是因為這個容易被忽略，它代表frame和iframe內(nèi)部的窗口對象。
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{ // 標準
doc = document.getElementById("MyIFrame").contentDocument;
}
return doc.body.innerHTML;
}
</script>
注意：上面的 .contentDocument 相當(dāng)于 .contentWindow.document ！
一、需求與遇到的問題
在網(wǎng)站的后臺管理中使用了iframe框架布局，包括頂部菜單、左側(cè)導(dǎo)航和主頁面。需求是：點擊主頁面上的一個按鈕，在頂部菜單欄的右側(cè)顯示“退出”鏈接，點擊可退出系統(tǒng)。
我的思路是：在頂部的菜單頁面放一個不可見的“退出”鏈接，當(dāng)用戶點擊位于iframe中的主頁面（mainPage.htm）中的按鈕時，在頂部菜單頁面的右側(cè)顯示“退出”。
我現(xiàn)在遇到的問題是：如何在頁面的一個iframe子頁面（mainPage.htm）中獲取并且操作其它iframe子頁面（比如topPage.htm）中的HTML元素？
二、通過JS獲取并操作iframe中的元素來解決問題
這里主要就是通過JS來操作Window對象。Window 對象表示瀏覽器中打開的窗口，如果文檔包含框架（frame 或 iframe 標簽），瀏覽器會為 HTML 文檔創(chuàng)建一個 window 對象，并為每個框架創(chuàng)建一個額外的 window 對象。
經(jīng)過我在網(wǎng)上查資料，找到了JS操作iframe中HTML元素的方法。示例如下。
function ShowExit() {
//獲取iframe的window對象
var topWin = window.top.document.getElementById("topNav").contentWindow;
//通過獲取到的window對象操作HTML元素，這和普通頁面一樣
topWin.document.getElementById("exit").style.visibility = "visible";
}
說明：第一步，通過window.top.document.getElementById("topNav")方法獲取了頂部菜單頁面（topPage.htm）所在的iframe對象；第二步，通過上一步獲取到的iframe對象的contentWindow屬性得到了iframe中元素所在的window對象；第三步，通過上一步獲取到的window對象來操作iframe框架中的元素，這和操作不在iframe框架中的普通HTML元素是一樣的。
相關(guān)文章
ES6新增了let命令,用來聲明變量,它的用法類似于var,但是所聲明的變量,只在let命令所在的代碼塊內(nèi)有效,下面這篇文章主要給大家介紹了關(guān)于JS中l(wèi)et的基本用法,需要的朋友可以參考下2023-01-01
使用Javascript實現(xiàn)復(fù)制粘貼功能的示例代碼
本篇文章記錄如何通過js代碼實現(xiàn)復(fù)制內(nèi)容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-09-09
虛擬邊緣就是按照一定映射關(guān)系，給圖像添加邊緣那么虛擬邊緣有什么用呢？接下來詳細介紹，需要了解的朋友可以參考下2012-12-12
解決layui的form里的元素進行動態(tài)生成,驗證失效的問題
今天小編就為大家分享一篇解決layui的form里的元素進行動態(tài)生成,驗證失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)倒計時補零功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
下面小編就為大家?guī)硪黄猨s 自帶的 map() 方法全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章介紹了復(fù)制行與刪除行在JS中操作的實例，需要的朋友可以參考一下2013-06-06
生成一個2000*5的表格，每個單元格的內(nèi)容是行號+逗號+列號，具體的實現(xiàn)過程如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
下面小編就為大家?guī)硪黄狫avascript字符串拼接小技巧(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了JavaScript實現(xiàn)多種排序算法的相關(guān)資料，包括冒泡排序、插入排序、選擇排序等，感興趣的小伙伴們可以參考一下2016-02-02