在專案中,尤其是後台管理專案,會使用到iframe巢狀的網頁,說起iframe,真的是個讓人頭疼的東西,能避開是最好避開。不然要請隨身備好氧氣瓶哈(因為管理和除錯過程中往往會被氣缺氧!!!哈哈哈~~~)
我們正常情況下獲取頁面的元素$(".class")、或者document.getelementbyid() 等,但是在有ifraim的情況下,你想獲取ifraim裡面的元素時,會發現很奇怪的問題就是,在頁面中直接獲取元素竟然獲取不到,可是當開啟檢查元素,控制台除錯的時候,又可以獲取到。剛開始遇到這個問題的時候,真的讓我頭疼了好久。後面經過排查和查詢資料,才發現其中的緣由:
一、同域:
1、父頁面獲取子頁面元素:
注意:onload事件
jquery獲取:
$("iframe").contents().find("holder")......;
(巢狀三層,或者更多時)
$('iframe').contents().find('iframe').contents().find("iframe")......
js獲取:
window.frames["holder"].contentwindow.document 或者 window.frames[0].contentwindow.document(不推薦)
(巢狀三層,或者更多時)
window.frames[0].contentwindow.window.frames[0](......).contentwindow.document
補充:document.frames 與 window.frames 之間的區別:
document.frames 只有ie、opera 支援,等同於 window.frames。用來取得當前頁面內 window 物件的集合。
在 firefox、chorome、safari中使用 document.frames 不能獲取到 frame 元素
window.frames['myframe'] 代替 document.frames('myframe')或document.frames['myframe']。
注意:window.frames只可寫成window.frames['myframe']不能寫成window.frames('myframe')
備註:有些人的瀏覽器不支援iframe或者說 contentwindow 報錯
可以這樣試試:
var x=document.getelementbyid("myframe");
var y=(x.contentwindow || x.contentdocument);
if (y.document)y=y.document;
y.body.style.backgroundcolor="#0000ff";
2、子頁面獲取父頁面元素:
1、子頁面獲取iframe父頁面的dom
jquery獲取:
$("#holder",parent.document)
js獲取:
parent.document.getelementbyid("holder")
2、子頁面獲取父頁面裡的其他iframe子頁面裡的dom
jquery獲取:
$("#holder",window.parent.frames["holder"].document)
js獲取:
window.parent.frames["holder"].document.getelementbyid("holder")
補充:opener 與 parent 之間的區別
opener:
opener用於在window.open的頁面引用執行該window.open方法的的頁面的物件。例如:a頁面通過window.open()方法彈出了b頁面,在b頁面中就可以通過opener來引用a頁面,這樣就可以通過這個物件來對a頁面進行操作。
parent:
parent用於iframe,frame中生成的子頁面中訪問父頁面的物件。例如:a頁面中有乙個iframe或frame,那麼iframe或frame中的頁面就可以通過parent物件來引用a頁面中的物件。這樣就可以獲取或返回值到a頁面中。
總結:parent指父視窗,在frameset中,frame的parent就是frameset視窗。
opener指用window.open等方式建立的新視窗對應的原視窗。
parent是相對於框架來說父視窗物件。
opener是針對於用window.open開啟的視窗來說的父視窗,前提是window.open開啟的才有。
iframe多層巢狀時獲取元素總結
同域 注意 onload事件 jquery獲取 iframe contents find holder 巢狀三層,或者更多時 iframe contents find iframe contents find iframe js獲取 window.frames holder contentwindo...
多層iframe巢狀使用相互取值
父頁面獲取子頁面元素 注意 onload事件 jquery獲取 iframe contents find holder 巢狀三層,或者更多時 iframe contents find iframe contents find iframe js獲取 window.frames holder docu...
多層iframe訪問
注意 一 等iframe裡面的檔案載入完才可以訪問 二 contentdocument ie6 7不支援 所以採用了contentwindow.document。如果不相容這兩個可以用 document.getelementbyid myframe contentdocument.getelemen...