有没有办法从 iframe 内部的元素访问 Dom 外部的 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 加载了，您通常可以在父窗口中查找内容，如下所示：$(parent.document).find("selector")，但 jQuery 的其他用途可能很奇怪，如果可能，最好使用窗口中的 jQuery 实例它已加载。

（只有当框架及其父级从同一来源加载时，才能执行此操作。）

回复您的评论：

唯一给我的就是。btn1 的 jquery 对象。我怎样才能找到它的父 iframe 元素。?

我想在这个 iframe 之外访问 DOM 例如我想知道当前 iframe 的父 div

我不相信有任何直接的方法可以做到这一点，不，您必须寻找：jQuery 对象（例如，btn1[0]）内的按钮元素有一个名为 的属性ownerDocument，它将是=== (theWindowThatContainsIt).document. iframe 元素具有contentDocument指向同一事物的属性。因此，您使用parent获取父窗口，然后找到其中的所有iframes，并选择具有以下内容的那个.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");
}