从 iFrame 中获取元素

IT技术 javascript iframe html
2021-01-09 07:13:04

你如何<div>从一个中获得一个<iframe>

6个回答
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 位于同一个域中,否则您将无法访问其内部结构。那将是跨站点脚本。

我见过比三元运算符更让人困惑的人。他们似乎不知道返回的是第一个有效的。
2021-03-12 07:13:04
@JellicleCat:任何方法都可以进行“跨站点请求伪造”,也称为“一键式”攻击或“会话骑行”
2021-03-13 07:13:04
很好的答案。你知道你可以这样做: var innerDoc = iframe.contentDocument || iframe.contentWindow.document; //更易读,意思相同
2021-03-21 07:13:04
为了简单起见,教育可能比使用更复杂的代码更好:)
2021-03-27 07:13:04
事实上,当我编辑答案以包含它时,我肩上的那个人问我那做了什么......
2021-04-05 07:13:04

加载后不要忘记访问 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>

以上答案使用 JavaScript 给出了很好的解决方案。这是一个简单的 jQuery 解决方案:

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

这里的技巧是jQuery的.contents()方法,不像.children()只能获取HTML元素,.contents()可以同时获取文本节点和HTML元素。这就是为什么可以通过使用 iframe 来获取文档内容的原因。

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

请注意,iframe 和页面必须位于同一域中。

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

CallYourFunction() 是页面内的函数和对它的函数操作

那是从 iFrame 调用函数,而不是获取对元素的引用。
2021-03-21 07:13:04

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

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

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

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