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.
I had the same issue and learned from this SO question that in fact it's the browser that does the stripping, as part of its parsing of the
innerHTML
property, which is whatjQuery
uses internally in.html()
.Rather, the problem is actually that
jQuery
uses an intermediate new DIV, which I believe is not allowed to contain certain tags, resulting in the stripping.To the solution, then. It's as simple as setting the
innerHTML
property of thehtml
element directly, like so:For your particular case, simply target the
html
element inside theiframe
. Your final code might be: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.
Run each function one at a time in Chrome Debugger:
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.
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".
**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. **
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.
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!