當前位置:歷史故事大全網 - 歷史天氣 - 怎麽獲取iframe裏面的元素

怎麽獲取iframe裏面的元素

JS獲取/設置iframe內對象元素、文檔的幾種方法

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

復制代碼 代碼如下:

document.frames[i].document.getElementById('元素的ID');

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

復制代碼 代碼如下:

document.frames['iframe的name'].document.getElementById('元素的ID');

以上方法,不僅對iframe適用,對frameset裏的frame也同樣適用。IE雖然擅於自定標準,但不得不說它很多的設計還是比較體現人性化的。比如這個,它在同樣支持下面的標準路徑之外,提供了壹個簡潔且形象化的寫法。

3、通用方法:

復制代碼 代碼如下:

document.getElementById('iframe的ID').contentWindow.document.getElementById('元素的ID')

註意要加上contentWindow,往往出現問題都是因為這個容易被忽略,它代表frame和iframe內部的窗口對象。

JS獲取iframe文檔內容

復制代碼 代碼如下:

<script type="text/javascript">

function getIframeContent(){ //獲取iframe中文檔內容

var doc;

if (document.all){ // IE

doc = document.frames["MyIFrame"].document;

}else{ // 標準

doc = document.getElementById("MyIFrame").contentDocument;

}

return doc.body.innerHTML;

}

</script>

註意:上面的 .contentDocument 相當於 .contentWindow.document !

壹、需求與遇到的問題

在網站的後臺管理中使用了iframe框架布局,包括頂部菜單、左側導航和主頁面。需求是:點擊主頁面上的壹個按鈕,在頂部菜單欄的右側顯示“退出”鏈接,點擊可退出系統。

我的思路是:在頂部的菜單頁面放壹個不可見的“退出”鏈接,當用戶點擊位於iframe中的主頁面(mainPage.htm)中的按鈕時,在頂部菜單頁面的右側顯示“退出”。

我現在遇到的問題是:如何在頁面的壹個iframe子頁面(mainPage.htm)中獲取並且操作其它iframe子頁面(比如topPage.htm)中的HTML元素?

二、通過JS獲取並操作iframe中的元素來解決問題

這裏主要就是通過JS來操作Window對象。Window 對象表示瀏覽器中打開的窗口,如果文檔包含框架(frame 或 iframe 標簽),瀏覽器會為 HTML 文檔創建壹個 window 對象,並為每個框架創建壹個額外的 window 對象。

經過我在網上查資料,找到了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元素是壹樣的。

  • 上一篇:传感器网络的名词解释
  • 下一篇:DOS命令有哪些
  • copyright 2024歷史故事大全網