Copying an entire document into an iframe with javascript

Question

It sounds wonky, but this is what I'm trying to do with javascript (this is all triggered by an event handler):

1. Save the contents of a page (preferably the whole document or at least documentElement object) into a variable.
2. Create an iframe and insert it into the body.
3. Replace the document of the iframe with the saved document (so that the iframe now has the same content as the outer page).
4. Change the outer page.

Everything is dandy except the part about replacing the iframe's document. I've tried a bunch of different things, but all have problems (they are outlined below). I need event handlers, styles, links, etc to all work correctly when the page is in the iframe.

And yes, I realize that I could just set the src of the iframe to the url of the current page, but I'd rather the page not have to load. If I can't come up with a solution, this is what I'll do.

---

Things that I've already tried:

var html = iframe.contentWindow.document.importNode(document.documentElement, true);
iframe.contentWindow.documentElement = html;

I get an error message ("setting a property that only has a getter").

var html = iframe.contentWindow.document.importNode(document.documentElement, true);
var idoc = iframe.contentWindow.document;
while(idoc.firstChild) idoc.removeChild(idoc.firstChild);  // remove all children (firefox automatically creates an html element for iframes with no src)
idoc.appendChild(html); // insert a new documentElement

This seems to work, but doesn't re-render the styles, and event handlers don't work. Interestingly, links don't work either, and they aren't even styled with the browser's default styles. Maybe this is because the DOCTYPE isn't copied to the iframe?

iframe.contentWindow.document.documentElement.innerHTML = document.documentElement.innerHTML;

This has the same behavior as the removeChild/appendChild method.

---

It seems like if I could just get the browser to re-render the styles and re-register the event handlers then I'd be golden, but I'm not sure if this is even possible.

Answer 1

In regards to the last method, perhaps the DOM of the window you are copying FROM has not loaded yet?

As for the Doctype, you could rebuild it from scratch and insert it before the html node using a document.write.

The doctype is accessible through document.doctype , but this only has a getter.