首頁 > web前端 > js教程 > JS取得並操作iframe中元素的方法_javascript技巧

JS取得並操作iframe中元素的方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 17:39:52
原創
2877 人瀏覽過

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文件內容

複製程式碼 程式碼如下:


注意:上面的 .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元素是一樣的。

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板