Injecting HTML into an IFrame

Walking through Tiddlywiki source (write-up to follow), I noticed some interesting code in TiddlyWiki.js, importTiddlyWiki function.

The code takes a string and injects into an IFrame. I had talked to Jon a little while ago about a similar problem and was wondering about it ever since. The technique here looks like this:

It wraps the text with tags to make it an HTML document:

javascript
< view plain text >
  1. var content = "<html><body>" + text + "</body></html>";

It then introduces a new iframe to the page.

javascript
< view plain text >
  1. var iframe = document.createElement("iframe");
  2.     document.body.appendChild(iframe);

Now comes the tricky part. You would think you could just create a new iframe element and set its innerHTML, but with iframes you must use an internal doc ument property.

javascript
< view plain text >
  1. var doc = iframe.document;
  2.     if(iframe.contentDocument)
  3.         doc = iframe.contentDocument; // For NS6
  4.     else if(iframe.contentWindow)
  5.         doc = iframe.contentWindow.document; // For IE5.5 and IE6
  6.     // Put the content in the iframe
  7.     doc.open();
  8.     doc.writeln(content);
  9.     doc.close();

Now the content is in our new iframe. We can then manipulate the content using standard Javascript…but ensuring a call like getElementById is executed against the iframe document, not the global document. (i.e. don’t use the usual document.getElementById()).

javascript
< view plain text >
  1. // Load the content into a TiddlyWiki() object
  2.     var storeArea = doc.getElementById("storeArea");
  3. };

With this technique, you can take an arbitrary HTML string and delegate its parsing to the browser’s built-in DOM engine.

21 thoughts on Injecting HTML into an IFrame

Comments are closed.

  1. Pingback: Ajaxian » Introducing HTML into an iframe and getting it back

  2. Girma => The benefit is that you can use document.write after page has already loaded, otherwise it would “delete” the current document.

    document.write does a lot of things that innerHTML doesn’t

  3. Girma, the difference is that you can’t run getElementById on a div.

    Also, the iframe behaves like a sandbox for CSS, so any CSS in the new document doesn’t interfere with your original document.

    Finally, the document inside the iframe has its own DOCTYPE, so if you were doing anything depended on having a particular DOCTYPE, you could do it inside the iframe.

  4. Pingback: outaTiME at refinn dot com » Blog Archive » Introducing HTML into an iframe and getting it back

  5. That’s all well and good but doesn’t that pose some serious issues for I.E?

    Like you can’t clone a node from the iframe and insert it into the main document due to the whole ownerDocument issue. What’s the work around for that one, good ol (god awful non standards compliant) outerHTML?

  6. Is this still possible with all modern browsers? I think its still feasible but i can see it having problems manipulating some of the inner Iframes source.

  7. Pingback: Inline SVG

  8. Pingback: Not Your Grandpa’s Framesets: Premasagar Rose shows us IFrame 2.0!

  9. Hello, I would like to pose a question to you regarding the iframe. We are developing a password manager and have to be able to parse out any website that accepts credentials and we struggle with websites that use the iframe for this purpose, particularly when we’re in Internet Explorer. Our code works perfectly in Firefox. My developers tell me that it has something to do with IE’s security and the iframe, not being that familiar with either one of those topics I set out to do some research. Is there any information you can share with me on this topic? The problem is that we need to be able to parse out information that is embedded in an iframe, and so far we have not been able to do it.

    Thanks, Roque

  10. Hi all, ist the written document inside the IFrame also a sandbox for JavaScript? Will JavaScript(that i write into the iFrame) be executed after writing the document?

  11. Thanks for this.

    Do you know how to get the JavaScript to execute in the IFrame after setting the HTML, and trigger the onLoad event as if it had loaded from a “src”?

  12. Thanks, this really helped.

    I’m trying to do something similar, but having some trouble.

    I’m creating an iframe dynamically, and then trying to write into it. The thing is, I’m writing into the iframe BEFORE appending it to the body. When I do this, the document object is always undefined (or null). Is there a way around this, or do I have to append the frame first in order to initialize its document object?