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.getElementById(iframe的id).contentWindow.方法

补充：
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打开的才有。