有没有一种方法可以从iframe内的元素访问Dom？

Question

我们有一种方法可以通过iframe遍历DOM到＃btn1，我们可以通过$('#iframe1').contents().find('#iframe2').contents().find('#btn1')

我正在努力将DOM从＃btn1向上移动到外部＃iframe2

以下代码给了我[]。 将btnElement视为jquery＃btn对象

`btnElement.closest('iframe')`

这也不起作用

btnElement.parent().parent().parent()

有没有办法从btn1访问iframe2之外的Dom？

注意：所有iframe都属于同一原点。 跨种族不是我关心的问题

Answer 1

你不能遍历它，不； 与jQuery配合使用的DOM植根于iframe的窗口中。

但是该窗口对象具有一个parent属性，该属性引用父窗口。 因此，您可以使用它来访问父窗口中的内容。

如果父窗口也加载了jQuery，则可以这样使用它： parent.$("selector") 。

如果父窗口未加载jQuery，但iframe加载了iframe，则通常可以这样在父窗口中查找内容： $(parent.document).find("selector") ，但是jQuery的其他用途可能是松鼠，如果可能的话，最好使用加载窗口中的jQuery实例。

（仅当框架和父框架是从同一原点加载的时，您才可以这样做。）

---

发表您的评论：

唯一给我的是。 btn1的jquery对象。 如何找到其父iframe元素。 ？

我想在此iframe之外访问DOM例如说，我想知道当前iframe的父div

我不认为有任何直接的方法可以执行此操作，不，您必须进行狩猎：jQuery对象（例如btn1[0] ）内的button元素具有一个名为ownerDocument的属性，该属性将=== (theWindowThatContainsIt).document 。 iframe元素具有contentDocument属性，该属性引用相同的内容。 因此，您可以使用parent获取父窗口，然后在其中找到所有iframe ，然后选择一个具有.contentDocument === btn[0].ownerDocument ：

var btn1 = $("#btn");
var doc = btn1[0].ownerDocument;
var iframe = $(parent.document).find("iframe").filter(function() {
    return this.contentDocument === doc;
});
if (iframe.length) {
    // We have the `iframe` element. To get its parent, we'd use
    // `iframe.parent()`. Let's give it a green border:
    iframe.parent().css("border", "1px solid green");
}