Why does jQuery remove body and head tags when populating an iframe with a style tag but not without?

Question

If I run the following code, the body and head tags are removed.

');

// 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('
');

// ** inserted something in the copy to prove we modified it!!
iBody.append("
JAMES WAS HERE
");

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

In the bottom of the website, inside the iframe, I saw my message in red on a white background. I could also see it in the source:

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

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!