首頁  >  文章  >  web前端  >  JS中FRAME的操作問題實例分析_javascript技巧

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

WBOY
WBOY原創
2016-05-16 16:33:111238瀏覽

本文範例探討了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中操作可以:             複製程式碼
複製程式碼

複製程式碼

複製程式碼

程式碼如下:

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程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn