从iFrame中获取元素

如何从<iframe>中获得<div> ?

436271 次浏览
小开
最佳答案 
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在同一个域中，否则你不能访问它的内部。这就是跨站点脚本编写。参考:

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

CallYourFunction()是页面内部的函数和函数在它上面的动作

小开

其他的答案都对我不起作用。我最终在我的iframe中创建了一个函数，返回我正在寻找的对象:

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

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

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

不要忘记访问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>
小开
以上答案给出了使用Javscript的很好的解决方案。 下面是一个简单的jQuery解决方案:

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

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

关于jQuery .contents()的进一步阅读:.contents ()

请注意, iframe和page必须在同一个域上。

小开

下面的代码将帮助您找到iframe数据。

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

如果iframe不在同一个域中，不能从父域访问它的内部，但可以修改iframe的源代码，那么可以修改iframe显示的页面以向父窗口发送消息，从而允许在页面之间共享信息。一些来源:

小开

你可以使用这个函数来查询页面上的任何元素，不管它是否嵌套在一个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都必须是同源的，否则该函数将抛出错误。


提交答案