为什么 jQuery 在使用样式标签填充 iframe 时删除 body 和 head 标签？

Question

如果我运行以下代码，body 和 head 标签将被删除。

<iframe src='blank.htm'>
    <html>
    <head>
        <style type="text/css">

        </style>
    </head>
    <body>
        test
    </body>
    </html>
</iframe>
<script>
    $('iframe').load(function () {
        var contents = $('iframe').text();
        $('iframe').contents().find('html').html(contents);
    });
</script>

如果我然后删除样式标签，一切都会正确显示。 为什么会这样，我怎样才能让它停止移除 head 和 body 标签？ 我希望内容按原样填充，无需任何操作。

Answer 1

我遇到了同样的问题，并从这个 SO 问题中了解到，实际上是浏览器执行剥离，作为其解析innerHTML属性的一部分，这是jQuery在.html()内部使用的内容。

相反，问题实际上是jQuery使用中间的新 DIV，我认为不允许包含某些标签，导致剥离。

那么解决方案。 就像直接设置html元素的innerHTML属性一样简单，如下所示：

// This forcibly removes head, body, and other tags, since it internally uses an empty DIV and its innerHTML property
jQuery(targetElement).html(exitHtml);

// This works fine
h = document.getElementsByTagName('html')[0];
h.innerHTML = htmlString;

对于您的特定情况，只需将 iframe中的html元素作为iframe 。 您的最终代码可能是：

<script>
    $('iframe').load(function () {
        var contents = $('iframe').text();
        iframeHtml = $('iframe').contents().find('html').get(0);
        iframeHtml.innerHTML = contents;
    });
</script>

Answer 2

您可以按照以下步骤了解如何将 iframe 内容复制到字符串、修改它并在 iframe 中替换它。这些步骤旨在在您的 Chrome 调试器中执行，并且仅用于教育/演示目的. 一旦您理解了该过程，您就可以尝试在您的网站上复制您的代码。

在 Chrome 调试器中一次运行每个 function：

// test iframe I loaded in a sandbox also at http://example.com
$('body div:first').before('<iframe src="http://example.com/company"></iframe>');

// retrieved the body of the iframe - I cloned it so I could perform operations
  // on the copy without bothering the iframe content.
iBody = $('iframe:first').contents().find('body').clone();

// got the head
iHead = $('iframe:first').contents().find('head').html();

// if there is script in the body, it really messes things up. So in my tests, 
  // I had to remove it before adding it back to the iframe.
iBody.find("script").remove();

// verify there are no script elements
ibody.html(); 

// replace the iframe head
$('iframe:first').contents().find('head').html(iHead);

// replace the iframe body first with a placeholder. The body is the sensitive 
  // part. If you destroy the DOM, it can make the entire page, including 
    // the parent, turn completely white.
$('iframe:first').contents().find('body').html('<div></div>');

// ** inserted something in the copy to prove we modified it!!
iBody.append("<div style='position:absolute;z-index:5000; color:red; " + 
    "background-color:white;'>JAMES WAS HERE</div>");

// now replace the body
$('iframe:first').contents().find('body').html(iBody);

在网站的底部，在 iframe 里面，我看到我的信息是白底红字。 我也可以在源代码中看到它：

$('iframe:first').contents().find('body').html();

我在匿名网站上执行了这些操作，使用 Chrome 的调试器控制台来运行命令。 第一个命令在主页中创建一个 iframe，站点的公司页面在 iframe 中。其余命令获取 iframe 的头部和主体，克隆主体，添加一些东西，如“JAMES WAS HERE”消息，到身体克隆，然后用该副本替换 iframe 身体。

我还通过在浏览器中加载http://getsatisfaction.com并在 iframe 中加载http://getsatisfaction.com/explore/product-innovation来验证相同的结果。通过重复上述步骤，我看到了我的消息，“JAMES曾在这里”。

**我遇到的最严重的问题是无法在副本中留下 JavaScript 或 CSS 样式标签。样式的解决方案是在将正文添加回 iframe之前进行所有样式修改。**

出于某种原因，浏览器尝试运行 JavaScript 并抛出错误。 这些错误的上下文让我认为 JavaScript 是在顶层上下文而不是 iframe 上下文中运行的。 这对您来说可能是个亮点。 另外，您可能需要想出另一个计划来在弹出窗口 window 或内联中显示预览。 这在具有不同 JavaScript 的不同网站上可能表现不同。它在 IE 中也可能表现得很奇怪。

简而言之，我实际上并没有看到这个解决方案可以支持生产网站，因为 JavaScript 必须在 iframe 中删除； 但是，根据您的需要，如果您不需要 iframe DOM 来使用任何 JavaScript，则可以在生产中使用它。

尽管如此，这是一个值得探索的有趣问题！

为什么 jQuery 在使用样式标签填充 iframe 时删除 body 和 head 标签？

问题描述

2 个解决方案

解决方案1
16 2013-04-22 21:25:29

解决方案2
3 已采纳 2012-04-08 06:29:51

为什么 jQuery 在使用样式标签填充 iframe 时删除 body 和 head 标签？

问题描述

2 个解决方案

解决方案1 16 2013-04-22 21:25:29

解决方案2 3 已采纳 2012-04-08 06:29:51

解决方案1
16 2013-04-22 21:25:29

解决方案2
3 已采纳 2012-04-08 06:29:51