从iFrame中获取元素

Question

你是如何得到<div>一个<iframe>？

Answer 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位于同一个域中,否则您将无法访问其内部.这将是跨站点脚本.

Answer 2

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

Answer 3

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

CallYourFunction()是页面内的函数以及该函数对其执行的操作

Answer 4

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

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

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

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

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