无法抓取 #document 元素内的元素答案

【问题标题】：Can't scrape elements inside #document element无法抓取 #document 元素内的元素
【发布时间】：2018-07-04 00:10:44
【问题描述】：

对于我的一个 Chrome 扩展项目，我通过动态填充其 src 属性，在当前网页的 <iframe> 标记中获取了另一个网页的 HTML 内容。现在，我想从<iframe> 标记中抓取一些值。但是 jQuery 总是将这个 <iframe> 标记显示为空。我使用的原因是在我开始抓取之前，我希望在获取的页面中执行一些 JavaScript 文件。我也尝试设置等待计时器，但 jQuery 总是将 <iframe> 标记显示为空（尽管设置了 src 属性）。

经过调查，我发现<iframe> 里面有一个奇怪的#document 值，后面是普通的HTML 标签。我想知道这是否是 jQuery 无法通过 <iframe> 标记内的 DOM 层次结构递归的原因。

请参阅下面所需<iframe> 标记的“检查”视图的屏幕截图。

此外，存在<iframe> 标签的主网页与新获取的页面网址位于同一网站上（尽管子域不同）。而且我在 Chrome 中没有收到任何访问权限警告，所以我不怀疑这是一个跨域问题。

编辑：
即使在等待 10 秒后：

console.log($("#insertHere").text());

返回空。而且，

console.log($("#insertHere").parent().html());

返回：<iframe id="insertHere" src="/courses/intro..." style="width:0;height:0;border:0; border:none;"></iframe>

【问题讨论】：

标签： javascript jquery html iframe web-scraping

【解决方案1】：

您可以使用此类代码获取 iframe 内容：

$('#insertHere').contents().find("html").html();


$('#insertHere').contents().find("#MathJax_Message").text();

如果 iframe 位于另一个域中（您的情况似乎并非如此），您的浏览器的跨站点脚本 (XSS) 保护将阻止它。

【讨论】：

不幸的是，$('#insertHere').contents() 也是空的。而且，我没有看到来自 Chrome 的有关 XSS 的警告。（虽然插件的“内容脚本”抓取的网站，会重定向到当前网站的子域。）
你能做一个测试，看看你的 iframe 是否可以访问主父页面（如果你在你正在加载的 iframe 页面中有控制权）？
否则，有一个很好的方法可以让来自不同域的 2 个页面进行通信：您可以使用“推送器”等在线服务，这将在页面之间建立一个通道......在这里你被限制在都带有域/子域。如果您对此感兴趣，我可以给您工作代码。显然，您需要能够在要抓取的 iframe 内容中添加推送代码
我尝试从 iframe 中访问父页面，但出现此错误：“SecurityError: Blocked a frame with origin from access a cross-origin frame”。因此，似乎同一网站的子域被视为跨域案例。我使用 dig 命令进行了测试，我得到了域和子域的不同 IP 地址。所以，这可能是失败的原因。
听起来很有趣。请分享代码。 :)

【解决方案2】：

#document 是 iFrame DOM 的页面文档对象。

尝试访问 iframe 的 document，例如

var frame = document.getElementById('#hidden-frame');
console.log(frame.document.body);

您也可以尝试使用Content Script 并允许它在all pages 和<all_urls> 中使用，这应该与iframe 内容一起加载，并使用它通过消息传递将内容发送到background script。

【讨论】：