为什么jQuery在使用样式标签填充iframe时会删除body和head标签，但不是没有？ [英] Why does jQuery remove body and head tags when populating an iframe with a style tag but not without?
问题描述
如果我运行以下代码，则会删除正文和头部标记。
If I run the following code, the body and head tags are removed.
<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>
如果我删除样式标签，一切都会正确显示。为什么这样，我怎么能让它停止移除头部和身体标签？我希望内容按原样填充，无需任何操作。
If I then remove the style tags, everything shows up correctly. Why is this and how can I get it to stop removing the head and body tags? I want the contents to be populated as is, without any manipulation.
推荐答案
以下是您可以了解的步骤如何将iframe内容复制到字符串，修改它，并将其替换为iframe。这些步骤旨在在您的Chrome调试器中执行，仅用于教育/演示目的。一旦您了解了该过程，您就可以尝试在您的网站上的代码中进行复制。
Here are steps you can follow to get an idea of how to copy the iframe content to a string, modify it, and replace it in the iframe. These steps are meant to be performed in your Chrome Debugger and are for educational/demonstration purposes only. Once you understand the process, you can then attempt to replicate in your code on your website.
在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的Debugger控制台运行命令。第一个命令在主页中使用iframe中的站点公司页面创建iframe。剩下的命令获取iframe的头部和主体，克隆身体，向身体克隆添加一些东西，如JAMES WAS HERE消息，然后用该副本替换iframe体。
I performed these actions on an anonymous website, using Chrome's Debugger console to run the commands. The first command creates an iframe in the home page with the site's company page in the iframe. The remaining commands get the head and body of that iframe, clone the body, add some stuff, like a "JAMES WAS HERE" message, to the body clone, and then replace the iframe body with that copy.
我还通过在浏览器中加载 http://getsatisfaction.com 来验证相同的结果并在iframe中加载 http://getsatisfaction.com/explore/product-innovation 。通过重复上述步骤，我看到了我的消息，JAMES WAS HERE。
I also verified the same results by loading http://getsatisfaction.com in my browser and loading http://getsatisfaction.com/explore/product-innovation in the iframe. By repeating the above steps, I saw my message, "JAMES WAS HERE".
**我遇到的最严重的问题是无法离开JavaScript或副本中的CSS样式标记。样式解决方案是在将主体添加回iframe之前进行所有样式修改。 **
**The most severe problem I ran into was not being able to leave the JavaScript or CSS style tags in the copy. The solution for styling is to make all style modifications before adding the body back to the iframe. **
由于某种原因，浏览器试图运行JavaScript并引发错误。这些错误的上下文让我认为JavaScript是在顶层上下文而不是iframe上下文中运行的！这对你来说可能是一个障碍。您可能需要提出另一个计划，以便在弹出窗口或内联中显示预览。此外，在使用不同JavaScript的不同网站上，这可能会有所不同。它在IE中也可能表现得很奇怪。
For some reason, the browser attempted to run the JavaScript and threw errors. The context of those errors made me think that the JavaScript was being run in the toplevel context instead of the iframe context! This may be a showstopper for you. You may need to come up with another plan for showing previews in a popup window or inline. Also, this may behave differently on different websites with different JavaScript. It also may behave strangely in IE.
简而言之，我实际上并不认为这个解决方案会支持生产网站，因为必须删除JavaScript iframe;但是，根据您的需要，如果您不需要使用iframe DOM来使用任何JavaScript，则可以在生产中使用。
In short, I don't actually see this solution being something that would support a production website, since the JavaScript must be removed in the iframe; however, depending on your needs, it may be possible to make this work in production if you don't need the iframe DOM to use any JavaScript.
尽管如此，这是一个有趣的问题需要探索！
Nevertheless, this was an interesting problem to explore!
这篇关于为什么jQuery在使用样式标签填充iframe时会删除body和head标签，但不是没有？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
