如何从<iframe>中获得<div> ?
当前回答
你可以使用这个函数来查询页面上的任何元素,不管它是否嵌套在一个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都必须是同源的,否则该函数将抛出错误。
其他回答
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在相同的域中,否则您无法访问它的内部。这就是跨站点脚本编写。参考:
MDN: <iframe>脚本 MDN:同源策略:跨源脚本API访问
你可以使用这个函数来查询页面上的任何元素,不管它是否嵌套在一个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都必须是同源的,否则该函数将抛出错误。
以上答案给出了使用Javscript的很好的解决方案。 下面是一个简单的jQuery解决方案:
$('#iframeId').contents().find('div')
这里的技巧是jQuery的.contents()方法,不像.children()只能获取HTML元素,.contents()可以同时获取文本节点和HTML元素。这就是为什么可以使用iframe来获取文档内容的原因。
关于jQuery .contents()的进一步阅读:.contents()
注意,iframe和page必须在同一个域中。
下面的代码将帮助您找到iframe数据。
let iframe = document.getElementById('frameId');
let innerDoc = iframe.contentDocument || iframe.contentWindow.document;
window.parent.document.getElementById("framekit").contentWindow.CallYourFunction('pass your value')
CallYourFunction()是页面内部的函数和它上面的函数动作
推荐文章
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 使用域集图例引导
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 音频停止功能
- 有Grunt生成index.html不同的设置
- 如何禁用谷歌翻译从HTML在Chrome
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- 向HTML表中添加水平滚动条