iframe多层嵌套时获取元素

Posted 古兰精

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iframe多层嵌套时获取元素相关的知识,希望对你有一定的参考价值。

一、同域:
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‘)

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多层嵌套时获取元素的主要内容,如果未能解决你的问题,请参考以下文章

请问高手,html如何获取iframe中嵌套的页面元素值

jq 在iframe中点击按钮,父元素触发事件

如何用javascript 跨域获取iframe子页面的元素信息

父子页面(iframe)相互获取对方dom元素

使用iframe框架打开页面(layer.open)并存在嵌套时怎样获取到嵌套内的框架对象?

vue+iframe实现点击F11全屏效果