Welcome to Mahemoff's blog on web development, UX, and software development. I most recently worked in developer relations at Google, focusing on Chrome and HTML5, and am now busy baking a few apps independently.
Follow @mahemoff on Twitter
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:
- var content = "<html><body>" + text + "</body></html>";
It then introduces a new iframe to the page.
- var iframe = document.createElement("iframe");
- 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.
- var doc = iframe.document;
- if(iframe.contentDocument)
- doc = iframe.contentDocument; // For NS6
- else if(iframe.contentWindow)
- doc = iframe.contentWindow.document; // For IE5.5 and IE6
- // Put the content in the iframe
- doc.open();
- doc.writeln(content);
- 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()).
- // Load the content into a TiddlyWiki() object
- var storeArea = doc.getElementById("storeArea");
- };
With this technique, you can take an arbitrary HTML string and delegate its parsing to the browser's built-in DOM engine.
I think there is a typo in your last snip of code.
The trailing closing brace isn’t needed… is it?
[...] Mahemof is working a lot with TiddlyWiki and posted on how the project injects HTML into an iframe, and then get them out later. This enables you to use the browser parser to do its thing: PLAIN [...]
what is the benefit of using an iframe, can we just use any other html element like div?
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
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.
[...] Mahemof is working a lot with TiddlyWiki and posted on how the project injects HTML into an iframe, and then get them out later. This enables you to use the browser parser to do its thing: // put it [...]
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?
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.
FWIW, it’s worth noting that there are security implications with this: http://trac.tiddlywiki.org/ticket/834#comment:1
[...] tried the Inject HTML into an iframe technique. I was hoping that with the right XML declaration and HTML type, I could convince the iframe it was [...]
[...] (aka squirt, inject; summary) content into a fresh [...]
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
what about if I need to inject some content and translate it all together with google translate?
Translate it with http://code.google.com/apis/ajaxlanguage/, then inject it.
Perfect! Thanks so much. I have been scratching my head for hours.
@Dylan: Who cares about IE! I’m still waiting for the recall from Microsoft on such crappy software.
Thanks a mil. Couldnt get to set html direct into the iframe until doing this method. Works great!
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?
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”?
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?
Great post! I am looking for this method for few hours already.
Thanks!