有没有办法从其中的元素访问 iframe 外部的 Dom？

Posted 2023-05-09

【中文标题】有没有办法从其中的元素访问 iframe 外部的 Dom？

【英文标题】：Is there a way to access Dom outside iframe from element within it?

【发布时间】：2016-05-14 11:11:09

【问题描述】：

我们有办法通过 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 都属于同一个来源。跨起源不是我关心的问题

【参考方案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 的属性，它将是@987654326 @。 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");

【讨论】：

一切都是从同一个来源加载的

挑战 1) 唯一给我的就是。 btn1 的 jquery 对象。如何找出它的父 iframe 元素。 ?

@RohitKumar：“它的父 iframe 元素”是什么意思？你的意思是它的父 window，还是你的字面意思是父的父中包含当前 iframe 父窗口的 iframe 元素？

我的意思是 iframe 标签。我们当然可以通过执行 btnElement.parent().parent() 到达当前 iframe 的主体，但是添加另一个 parent() 像 btnElement.parent().parent().parent() 将返回 []

@RohitKumar：我不相信有任何 直接 方法可以做到这一点，不，你必须寻找：jQuery 对象内的按钮元素（例如，@987654332 @) 有一个名为ownerDocument 的属性，即=== (theWindowThatContainsIt).document。 iframe 元素有一个 contentDocument 属性，它指的是同一件事。所以你用parent来获取父窗口，然后找到里面所有的iframe，选择有.contentDocument === btn[0].ownerDocument的那个。