iframe多層嵌套時,Jquery獲取元素


在項目中,尤其是后台管理項目,會使用到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打開的才有。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 iframe多層嵌套時獲取元素 2014-10-28——iframe多層嵌套時獲取元素總結 元素多層嵌套,JS獲取問題 Layui Iframe 多層嵌套 Jquery如何獲得