为什么用jQuery的风格标签，但没有填充一个iframe时去除身体和头部的标签？(Why does

如果我运行下面的代码，身体和头部标签被删除。

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

如果我再删除样式标签，一切都显示正确。这是为什么，我怎样才能得到它停止去除头部和身体的标签？我想内容要填充的是，没有任何操作。

Answer 1:

以下是你可以按照获得怎样的iframe中的内容复制到一个字符串，修改它，并在iframe取代它的想法的步骤。这些步骤是为了在您的Chrome调试器来执行，并仅用于教育/演示目的。一旦你了解的过程中，你可以然后尝试在你的代码复制到您的网站上。

在Chrome的调试时间运行的每个功能之一：

// 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的头部和身体，克隆体，添加一些东西，像“詹姆斯在这里”的消息，对身体的克隆，然后用该副本替换iframe的身体。

我也通过加载验证了同样的结果http://getsatisfaction.com在我的浏览器和加载http://getsatisfaction.com/explore/product-innovation在iframe。通过重复上述步骤，我看到了我的留言，“詹姆斯在这里”。

**最严重的问题，我跑进是不能够离开的JavaScript或CSS样式标记的副本。为造型的解决方案是将身体恢复到了iframe 之前，使所有的风格修改。 **

出于某种原因，浏览器尝试运行JavaScript和投掷的错误。这些错误的情况下让我觉得JavaScript是在顶层背景下，而不是在iframe上下文中运行！这可能是你一个搅局者。您可能需要拿出另一个计划用于显示在弹出式窗口或在线预览。此外，此行为可能不同与不同的JavaScript不同的网站。它也可以运行异常，在IE浏览器。

总之，我并没有真正看到这个解决方案是什么，将支持生产网站，因为Javascript必须在iframe中被删除; 然而，根据您的需要，有可能使在生产这个工作，如果你不需要的iframe DOM使用任何JavaScript。

然而，这是为了探索一个有趣的问题！

Answer 2:

我有同样的问题，并从中学到这太问题，实际上它是不剥离，作为其解析的部分浏览器innerHTML属性，这是什么jQuery在内部使用.html()

相反，这个问题实际上是一个jQuery使用中间的新DIV，我相信这是不允许包含某些标记，导致剥离。

向溶液中添加即可。这是由于设置简单innerHTML的财产html直接元素，就像这样：

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

为了您的具体情况，只是针对html 里面元素iframe 。你的最终代码可能是：

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