在Chrome的web检查器中，如果右键单击DOM元素，则会有一个"复制为HTML"选项，通常会为您提供该元素及其所有子元素的HTML字符串。然而，它似乎从未包含IFrame标记的内容，尽管它们作为子节点出现在检查器中。
这个问题不是由跨域限制引起的：即使是相同域的IFrame也会从复制的HTML中排除。
除了复制和粘贴每个嵌套IFrame的HTML根，并在文本编辑器中手动将它们缝合在一起之外，还有什么办法可以解决这个问题吗？我在一个网站工作，该网站的第三方广告脚本通常会生成庞大的嵌套IFrame树，我需要一种方法让同事能够复制和粘贴该结构，这样我就可以在不坐在他们办公桌前的情况下调试广告问题。
我相信Google Chrome已经在浏览器中的某个地方对行为进行了硬编码，但我没有时间找到代码部分。
这里有一个解决方案，它将使用googlechrome从网页上当前的所有iframe中获取html。
设置：
- 关闭所有Google Chrome浏览器，然后在禁用网络安全的情况下启动Google Chrome。否则，运行
DisplayIframeContent.js将产生这样的错误
不安全的JavaScript尝试访问带有URL的帧
示例：
cd LOCATION \ OF \ GOOGLE \ CHROME
CHROME.exe-禁用网络安全
当谷歌CHROME加载时，您应该看到一条黄色警告，上面写着
您使用的是不受支持的命令行标志：--disable web security。稳定和安全将受到损害
用法：
- 启动Google Chrome后，打开您的测试网站
- 按F12打开开发工具
- 将jQuery的内容复制并粘贴到控制台中
- 在控制台中复制并粘贴
DisplayIframeContent.js
DisplayIframeContent.js
// @author Larry Battle <bateru.com/news> 12.13.2012
// requires jQuery 1.8.3+
clear();
if( !$("iframe").length ){
console.log("No iframes were found");
}else{
$("iframe").each(function (i) {
console.log( "### iframe[%s].src = (%s)", i, $(this).attr("src") );
console.log( $(this).contents().find("html").html() )
});
}
"done";
- 复制并粘贴控制台的输出
预期输出：
示例URL：http://jsfiddle.net/28yrA/输出：
### iframe[0].src = (javascript:false)
...HTML...
### iframe[1].src = (javascript:false)
...HTML...
### iframe[2].src = (javascript:false)
...HTML...
### iframe[3].src = (http://fiddle.jshell.net/28yrA/show/)
...HTML...
"done"
我终于找到了一个解决方案，通过DW-dev的Chrome扩展名为Save Page WE。
https://chrome.google.com/webstore/detail/save-page-we/dhhpefjklgkmgeafimnjhojgjamoafof
它也适用于Firefox。https://addons.mozilla.org/en-US/firefox/addon/save-page-we/
另一个答案可能有效，但我不喜欢仅仅为了复制一些html而禁用安全性。
这里的另一种方式是IMHO方式的简化。
首先检查元素并复制iframe元素，现在将其粘贴到您想要添加的任何位置。
结果应该是一个空的iframe标签，包含所有it属性：
<iframe src="src"></iframe>
现在在iframe中手动键入#document和DOCTYPE，这样您现在就有了类似的内容：
<iframe>
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</iframe>
将iframe中文档的父节点复制为html，它将复制所有子节点，就像复制普通html页面一样。
只需将其粘贴回doctype下，即可获得完整的iframe。最终结果应该看起来像这个
<iframe>
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- All the child nodes -->
</html>
</iframe>