JS中FRAME的操作問題實例分析_javascript技巧

本文範例探討了JS中FRAME的操作問題，並分享給大家供大家參考。具體分析如下：

以上圖為例，在這裡把frame之間的互相操作簡單列為：1變數2方法3頁面之間元素的互相獲取。

一、  先從 父(frameABC)------->子(frameA,frameB,frameC)

① 存取變數名稱

假如在frameABC中操作那麼可以：

複製程式碼 程式碼如下:

window.frames("frameA").contentWindow.name

或

複製程式碼 程式碼如下:

document.getElementById("frameA").contentcontentdowA").contentcontent.name

或

複製程式碼 程式碼如下:

jquery：window.$("#frameA")[0] .contentWindow.name

② 訪問方法func

假如在frameABC中操作可以：            

複製程式碼複製程式碼

程式碼如下:

window.frames("frameA").contentWindow.func();

或複製程式碼

程式碼如下:

document.getElementById("frameA").contentcontentdowfunc(unc(). ;

或複製程式碼

程式碼如下:

jquery：window.$("#frameA")[0] .contentWindow.func();

③ 存取子頁元素:username

假如在frameABC中操作可以：             複製程式碼

複製程式碼

程式碼如下:window.frames("frameA").contentWindow.document.getElementElementByageent.getElementByIdname" ); 或

複製程式碼

程式碼如下:document.getElementById("frameA").contentπElement.document. ("username"); 或

複製程式碼

程式碼如下:

jquery：window.$("#frameA")[0] .contentWindow.$("#username");

二、 然後從子(frameA,frameB,frameC)------------>到父(frameABC) ① 存取父頁變數name,假如在frameA中(子頁面)操作那麼可以：

複製程式碼

程式碼如下:window.parent.name;window.parent.name;

② 存取父頁面方法func,假如在frameA中(子頁面)操作那麼可以：

複製程式碼 程式碼如下:window.parent.func();

③ 存取父頁元素username,假如在frameA中(子頁面)操作那麼可以：

複製程式碼 程式碼如下:window.parent.$("#username")

window.parent.$("#username")

或：複製程式碼 程式碼如下:window.parent.document.getElementById("username");

總結：

frame只是一個頁面框架，要想操作子frame中的元素都需要先進入到window或contentWindow。從子頁面存取父頁面，需要計算好父子關係，分成幾層結構。

在網上看了其他帖子，談到有關頁面加載的問題。大概意思是在子frame頁面還沒載入出來就進行元素操作，會引起bug，有興趣的朋友可以針對性的測試一下，相信會有新的收穫！

希望本文所述對大家的javascript程式設計有所幫助。