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

Question

In Chrome's web inspector, if you right-click a DOM element there's a "Copy as HTML" option that will normally give you an HTML string of that element and all its children.在 Chrome 的网络检查器中，如果您右键单击 DOM 元素，会出现一个“复制为 HTML”选项，通常会为您提供该元素及其所有子元素的 HTML 字符串。 However, it doesn't seem to ever include the contents of IFrame tags despite the fact they appear in the inspector as child nodes.但是，它似乎从未包含 IFrame 标记的内容，尽管它们在检查器中显示为子节点。

The problem isn't caused by cross-domain restrictions: Even same-domain IFrames are excluded from the copied HTML.问题不是由跨域限制引起的：即使是相同域的 IFrame 也被排除在复制的 HTML 之外。

Is there any way around this, short of just copy-and-pasting the HTML root of every nested IFrame and manually stitching them together in a text editor?除了复制和粘贴每个嵌套 IFrame 的 HTML 根目录并在文本编辑器中手动将它们拼接在一起之外，有什么办法可以解决这个问题吗？ I work for a site whose third-party ad scripts often produce large, sprawling trees of nested IFrames, and I need a way for coworkers to be able to copy-and-paste that structure so I can debug ad issues without my physically sitting down at their desk.我在一个网站工作，该网站的第三方广告脚本通常会产生庞大的嵌套 IFrame 树，我需要一种方法让同事能够复制并粘贴该结构，这样我就可以在不坐下来的情况下调试广告问题在他们的办公桌上。

Answer 1

I believe Google Chrome has hard coded the behavior inside their browser somewhere but I don't have time to find the section of code.我相信谷歌浏览器已经在他们的浏览器中的某个地方硬编码了行为，但我没有时间找到代码部分。

Here's a work around that will grab the html from all the iframes current on the webpage using google chrome.这是一个解决方法，它将使用谷歌浏览器从网页上当前的所有 iframe 中获取 html。

Setup:设置：

Close all of your Google Chrome browsers, then launch Google Chrome with web security disabled.关闭所有 Google Chrome 浏览器，然后在禁用网络安全的情况下启动 Google Chrome。 Otherwise running DisplayIframeContent.js will produce an error like this.否则运行DisplayIframeContent.js会产生这样的错误。

Unsafe JavaScript attempt to access frame with URL... 不安全的 JavaScript 尝试使用 URL 访问框架...

Example:例子：

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

When Google Chrome loads you should see an yellow warning stating,当 Google Chrome 加载时，您应该会看到一条黄色警告，说明：

You are using an unsupported command-line flag: --disable-web-security. 您正在使用不受支持的命令行标志：--disable-web-security。 Stabilty and security will suffer. 稳定和安全将受到影响。

Usage:用法：

After launching Google Chrome open up your test website.启动 Google Chrome 后，打开您的测试网站。
Press F12 to open the devtools.按F12打开开发工具。
Copy and paste the content of jQuery inside the console.将jQuery的内容复制并粘贴到控制台中。
Copy and paste DisplayIframeContent.js inside the console.将DisplayIframeContent.js复制并粘贴到控制台中。

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

Copy and paste the output from the console.复制并粘贴控制台的输出。

Expected Output:预期输出：

Example URL: http://jsfiddle.net/28yrA/ Output:示例 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

I finally found a solution, via a Chrome Extension called Save Page WE by DW-dev.我终于找到了一个解决方案，通过 DW-dev 的名为Save Page WE的 Chrome 扩展。

https://chrome.google.com/webstore/detail/save-page-we/dhhpefjklgkmgeafimnjhojgjamoafof https://chrome.google.com/webstore/detail/save-page-we/dhhpefjklgkmgeafimnjhojgjamoafof

It is also available for Firefox.它也适用于 Firefox。https://addons.mozilla.org/en-US/firefox/addon/save-page-we/https://addons.mozilla.org/en-US/firefox/addon/save-page-we/

Answer 3

The other answer may works, but I don't like disabling the security just to copy some html.另一个答案可能有效，但我不喜欢仅仅为了复制一些 html 而禁用安全性。

Here another way that is IMHO way simplier.这是另一种更简单的恕我直言方式。

First Inspect element and copy the iframe element now paste it wherever you want to add it.首先检查元素并复制iframe元素，然后将其粘贴到您想要添加的任何位置。

The result should be en empty iframe tag with all it attributes:结果应该是一个带有所有 it 属性的空iframe标签：

<iframe src="src"></iframe>

Now inside that iframe manually type the #document and DOCTYPE so you now have something like:现在在该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>

Copy the parent node of the document in the iframe as html and it will copy all it childs as if you would copy a normal html page.将 iframe 中文档的父节点复制为 html，它将复制所有子节点，就像复制普通的 html 页面一样。

Simply paste back under the doctype and you have your entire iframe .只需粘贴回 doctype 下，您就拥有了整个iframe 。 The ending result should look something like this最终结果应该是这个样子

<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

Setup:设置：

Usage:用法：

Expected Output:预期输出：

解决方案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

Setup:设置：

Usage:用法：

Expected Output:预期输出：

解决方案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