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

Posted

技术标签:

【中文标题】Chrome Inspector 中嵌套 IFrame 元素上的“复制为 HTML”【英文标题】:"Copy as HTML" on nested IFrame elements in Chrome Inspector 【发布时间】:2012-12-01 22:38:04 【问题描述】:

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

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

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

【问题讨论】:

示例:jsfiddle.net/28yrA 【参考方案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 打开开发工具。 将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"

【讨论】:

优秀的答案。禁用 XSS 保护是一个大锤子,但我怀疑还有其他方法。谢谢!【参考方案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/

【讨论】:

【参考方案3】:

另一个答案可能有效,但我不喜欢仅仅为了复制一些 html 而禁用安全性。

这是另一种方式,恕我直言,方式更简单。

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

结果应该是一个空的iframe标签,它的所有属性:

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

现在在 iframe 里面手动输入 #documentDOCTYPE 这样你现在就有了类似的东西:

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

【讨论】:

这正是 OP 想要避免做的事情。

以上是关于Chrome Inspector 中嵌套 IFrame 元素上的“复制为 HTML”的主要内容,如果未能解决你的问题,请参考以下文章

有没有办法在 Chrome 的 Inspector 中查看实时执行的 Javascript 函数(函数的名称)?

在 Javascript 控制台中控制 Chrome Web Inspector?

在 Firefox 或 Chrome Inspector 中复制显示的 HTML(保持缩进和格式)

如何将 Chrome 开发人员工具 Inspector 中的 CSS 更改保存到 .vue 文件

如何使用 Chrome Inspector 显示 jquery 插件的弹出 css

Nodejs chrome 调试node-inspector