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雖然擅于自定標(biāo)準(zhǔn),但不得不說它很多的設(shè)計(jì)還是比較體現(xiàn)人性化的。比如這個(gè),它在同樣支持下面的標(biāo)準(zhǔn)路徑之外,提供了一個(gè)簡潔且形象化的寫法。
3、通用方法:
document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')
注意要加上contentWindow,往往出現(xiàn)問題都是因?yàn)檫@個(gè)容易被忽略,它代表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{ // 標(biāo)準(zhǔn)
doc = document.getElementById("MyIFrame").contentDocument;
}
return doc.body.innerHTML;
}
</script>
注意:上面的 .contentDocument 相當(dāng)于 .contentWindow.document !
一、需求與遇到的問題
在網(wǎng)站的后臺管理中使用了iframe框架布局,包括頂部菜單、左側(cè)導(dǎo)航和主頁面。需求是:點(diǎn)擊主頁面上的一個(gè)按鈕,在頂部菜單欄的右側(cè)顯示“退出”鏈接,點(diǎn)擊可退出系統(tǒng)。
我的思路是:在頂部的菜單頁面放一個(gè)不可見的“退出”鏈接,當(dāng)用戶點(diǎn)擊位于iframe中的主頁面(mainPage.htm)中的按鈕時(shí),在頂部菜單頁面的右側(cè)顯示“退出”。
我現(xiàn)在遇到的問題是:如何在頁面的一個(gè)iframe子頁面(mainPage.htm)中獲取并且操作其它iframe子頁面(比如topPage.htm)中的HTML元素?
二、通過JS獲取并操作iframe中的元素來解決問題
這里主要就是通過JS來操作Window對象。Window 對象表示瀏覽器中打開的窗口,如果文檔包含框架(frame 或 iframe 標(biāo)簽),瀏覽器會為 HTML 文檔創(chuàng)建一個(gè) window 對象,并為每個(gè)框架創(chuàng)建一個(gè)額外的 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)文章
JS中使用media實(shí)現(xiàn)響應(yīng)式布局
本文通過代碼給大家總結(jié)了常見的響應(yīng)式布局media的使用方法,感興趣的朋友參考下吧2017-08-08JavaScript高級程序設(shè)計(jì) 閱讀筆記(十九) js表格排序
js表格排序?qū)崿F(xiàn)代碼,需要的朋友可以參考下2012-08-08JS實(shí)現(xiàn)的數(shù)組全排列輸出算法
這篇文章主要介紹了JS實(shí)現(xiàn)的數(shù)組全排列輸出算法,實(shí)例分析了全排列的原理與相關(guān)的javascript實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03解決JS使用fill()進(jìn)行數(shù)組填充遇到的問題
最近在做算法題時(shí),遇到需要?jiǎng)?chuàng)建二維數(shù)組并進(jìn)行初始化的情況,剛開始我使用的是 new Array(n).fill(new Array(n).fill('.')) 進(jìn)行二維數(shù)組的初始化,但無論怎樣我都通不過測試用例,所以本文就給大家詳細(xì)的介紹了如何解決這類問題以及將js中的fill(方法重學(xué)一下2023-09-09JS動態(tài)添加與刪除select中的Option對象(示例代碼)
本篇文章主要介紹了JS動態(tài)添加與刪除select中的Option對象(示例代碼) 需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12JavaScript實(shí)現(xiàn)仿淘寶商品購買數(shù)量的增減效果
最近接了個(gè)項(xiàng)目,要開發(fā)一個(gè)地方的O2O租書項(xiàng)目,使用的是asp.net mvc技術(shù),其中咋圖書詳情頁,用戶可以輸入借閱的數(shù)量,器實(shí)現(xiàn)此功能的方法是使用了js來控制數(shù)量的增減和校驗(yàn),對js實(shí)現(xiàn)商品數(shù)量的增減功能感興趣的朋友一起學(xué)習(xí)吧2016-01-01Layui數(shù)據(jù)表格 前后端json數(shù)據(jù)接收的方法
今天小編就為大家分享一篇Layui數(shù)據(jù)表格 前后端json數(shù)據(jù)接收的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09