Question

I have all a websites HTML stored in a javascript string & I want to place it inside an iframe. How can I place that HTML string into the iframe & make it show the website? I have tried this.src = HTML_STR; this.innerHTML = HTML_STR; but they dont show the HTML_STR.

I understand that this maybe silly because instead of having the websites HTML in a string I could just set the iframes src to the website & show the website that way.

BUT the reason I am doing this is because its a website updater. So I want to get the website (that I am updating) HTML, convert all the elements with the class “updatable” to textareas(so they can be updated) then show that HTML in the iframe.

The other reason for using an iframe & not just chucking the HTML in a div, is because each website imports a .css style sheet & I dont want their css file to affect my updater websites css or have my updater .css affect the websites HTML look thus if I show the website in an iframe each websites css wont affect each other.

For example if updater.css has the following it will affect all the p elements in the other websites html:

p { background-color: red; width: 50%; }

So is there a way to insert my own HTML into an iframe. Or is there another way to achieve what I am trying to do.

Answer 1

Assuming that you want to write to the iframe from the parent, you could do this:

var ifrm = document.getElementById('myFrame');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

Here’s a working jsFiddle. Original code taken from here and here.