从 iFrame 中获取元素答案

【问题标题】：Get element from within an iFrame从 iFrame 中获取元素
【发布时间】：2010-11-08 11:33:02
【问题描述】：

如何从<iframe> 中获取<div>？

【问题讨论】：

【解决方案1】：

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

你可以更简单地写：

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

将返回第一个有效的内部文档。

获得内部文档后，您可以像访问当前页面上的任何元素一样访问其内部。（innerDoc.getElementById...等）

重要提示：确保 iframe 位于同一域中，否则您无法访问其内部。那将是跨站点脚本。

【讨论】：

很好的答案。你知道你可以这样做吗： var innerDoc = iframe.contentDocument || iframe.contentWindow.document; //更具可读性和意义相同
我见过人们对此感到困惑，而不仅仅是三元运算符。他们似乎不知道返回的是第一个有效的。
事实上，当我编辑答案以包含它时，我肩上的那个人问我做了什么......
为了简单起见，教育可能比使用更复杂的代码更好:)
@JellicleCat：任何绕过它的方法都是一种“跨站点请求伪造”，也称为“一键式”攻击或“会话骑行”

【解决方案2】：

window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() 是页面内的函数，并且该函数对其进行操作

【讨论】：

这是从 iFrame 调用函数，而不是获取对元素的引用。

【解决方案3】：

其他答案都不适合我。我最终在我的 iframe 中创建了一个函数，该函数返回我正在寻找的对象：

function getElementWithinIframe() {
    return document.getElementById('copy-sheet-form');
}

然后你像这样调用该函数来检索元素：

var el = document.getElementById("iframeId").contentWindow.functionNameToCall();

【讨论】：

【解决方案4】：

不要忘记在加载后访问 iframe。没有 jQuery 的旧但可靠的方法：

<iframe src="samedomain.com/page.htm" id="iframe" onload="access()"></iframe>

<script>
function access() {
   var iframe = document.getElementById("iframe");
   var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
   console.log(innerDoc.body);
}
</script>

【讨论】：

【解决方案5】：

以上答案使用 Javscript 提供了很好的解决方案。这是一个简单的jQuery解决方案：

$('#iframeId').contents().find('div')

这里的诀窍是jQuery的.contents()方法，不像.children()只能获取HTML元素，.contents()可以获取文本节点和HTML元素。这就是为什么人们可以通过使用它来获取 iframe 的文档内容。

进一步阅读 jQuery .contents(): .contents()

注意 iframe 和页面必须在同一个域中。

【讨论】：

【解决方案6】：

以下代码将帮助您找出 iframe 数据。

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;

【讨论】：

为什么要重复 9 年前发布的已接受答案中的部分建议？至少删除这个答案会给你一个Peer Pressure徽章……

【解决方案7】：

如果 iframe 不在同一个域中，因此您无法从父窗口访问其内部，但您可以修改 iframe 的源代码，然后您可以修改 iframe 显示的页面以向父窗口发送消息，它允许您在页面之间共享信息。一些来源：

【讨论】：

【解决方案8】：

您可以使用此函数查询页面上的任何元素，无论它是否嵌套在一个 iframe（或多个 iframe）内：

function querySelectorAllInIframes(selector) {
  let elements = [];

  const recurse = (contentWindow = window) => {

    const iframes = contentWindow.document.body.querySelectorAll('iframe');
    iframes.forEach(iframe => recurse(iframe.contentWindow));
    
    elements = elements.concat(contentWindow.document.body.querySelectorAll(selector));
  }

  recurse();

  return elements;
};

querySelectorAllInIframes('#elementToBeFound');

注意：请记住，页面上的每个 iframe 都需要同源，否则此函数将引发错误。

【讨论】：