Chrome 检查器中嵌套 IFrame 元素的“复制为 HTML”

Question

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

问题不是由跨域限制引起的：即使是相同域的 IFrame 也被排除在复制的 HTML 之外。

除了复制和粘贴每个嵌套 IFrame 的 HTML 根目录并在文本编辑器中手动将它们拼接在一起之外，有什么办法可以解决这个问题吗？ 我在一个网站工作，该网站的第三方广告脚本通常会产生庞大的嵌套 IFrame 树，我需要一种方法让同事能够复制并粘贴该结构，这样我就可以在不坐下来的情况下调试广告问题在他们的办公桌上。

Answer 1

我相信谷歌浏览器已经在他们的浏览器中的某个地方硬编码了行为，但我没有时间找到代码部分。

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

设置：

关闭所有 Google Chrome 浏览器，然后在禁用网络安全的情况下启动 Google Chrome。 否则运行DisplayIframeContent.js会产生这样的错误。

不安全的 JavaScript 尝试使用 URL 访问框架...

例子：

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

当 Google 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"

Answer 2

我终于找到了一个解决方案，通过 DW-dev 的名为Save Page WE的 Chrome 扩展。

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元素，然后将其粘贴到您想要添加的任何位置。

结果应该是一个带有所有 it 属性的空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 检查器中嵌套 IFrame 元素的“复制为 HTML”

问题描述

3 个解决方案

解决方案1
3 2012-12-14 00:20:35

设置：

用法：

预期输出：

解决方案2
1 已采纳 2020-01-22 16:02:19

解决方案3
0 2015-04-17 22:03:00

Chrome 检查器中嵌套 IFrame 元素的“复制为 HTML”

问题描述

3 个解决方案

解决方案1 3 2012-12-14 00:20:35

设置：

用法：

预期输出：

解决方案2 1 已采纳 2020-01-22 16:02:19

解决方案3 0 2015-04-17 22:03:00

解决方案1
3 2012-12-14 00:20:35

解决方案2
1 已采纳 2020-01-22 16:02:19

解决方案3
0 2015-04-17 22:03:00