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


当前回答

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

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage Html5 -跨浏览器Iframe postmessage -子到父? 从子节点到父节点的postMessage

其他回答

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

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

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

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

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

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage Html5 -跨浏览器Iframe postmessage -子到父? 从子节点到父节点的postMessage

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

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

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

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

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

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

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

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

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