从iFrame中获取元素

2020/10/10 10:41 · javascript ·  · 0评论

您如何<div>从内获得一个<iframe>

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

加载后,请不要忘记访问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>
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')

CallYourFunction() 是页面内的函数,并且该函数在页面上的作用

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

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

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

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

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

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

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

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

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

如果iframe不在同一个域中,以致您无法从父级访问其内部结构,但可以修改iframe的源代码,则可以修改iframe所显示的页面以将消息发送到父级窗口,从而允许您可以在页面之间共享信息。一些来源:

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

let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;
本文地址:http://javascript.askforanswer.com/congiframezhonghuoquyuansu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!