Question

在Chrome的网页检查器中，如果右键单击DOM元素，则会出现“复制为HTML”选项，该选项通常会为您提供该元素及其所有子元素的HTML字符串。但是，它似乎并未包含IFrame标记的内容，尽管它们作为子节点出现在检查器中。

问题不是由跨域限制引起的：即使从复制的HTML中排除同域IFrame也是如此。

有没有办法解决这个问题，只是复制并粘贴每个嵌套IFrame的HTML根目录并在文本编辑器中手动将它们拼接在一起？我为一个网站工作，其第三方广告脚本经常会生成嵌套IFrame的大型蔓延树，我需要一种方法让同事能够复制并粘贴该结构，这样我就可以调试广告问题而无需亲身坐下在他们的办公桌前。

Answer 1

我相信谷歌浏览器已在其浏览器内部对其行为进行了硬编码，但我没有时间查找代码部分。

这是一个解决方法，它将使用谷歌浏览器从网页上的所有iframe中获取html。

设定：

关闭所有Google Chrome浏览器，然后启用禁用网络安全功能的Google Chrome浏览器。否则运行DisplayIframeContent.js将产生这样的错误。

不安全的JavaScript尝试使用URL ...

访问框架

示例：

cd LOCATION \ OF \ GOOGLE \ CHROME
chrome.exe --disable-web-security

Google Chrome加载后，您会看到黄色警告，

您使用的是不受支持的命令行标志： - disable-web-security。稳定性和安全性将受到影响。

用法：

启动Google Chrome后，打开测试网站。
按 F12 打开devtools。
将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";

复制并粘贴控制台的输出。

预期产出：

示例网址：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"

Answer 2

我终于通过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/

Answer 3

另一个答案可能有效，但我不喜欢只是复制一些HTML来禁用安全性。

这是恕我直言的另一种方式简化。

首先检查元素并复制iframe元素，现在将其粘贴到您想要添加的位置。

结果应为空iframe标记及其所有属性：

<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>

Chrome Inspector中嵌套IFrame元素上的“复制为HTML”

3 个答案:

设定：

用法：

预期产出：