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.
8 responses so far ↓
1 stuart // Aug 6, 2008 at 1:34 pm
I think there is a typo in your last snip of code.
The trailing closing brace isn’t needed… is it?
2 Ajaxian » Introducing HTML into an iframe and getting it back // Aug 6, 2008 at 4:07 pm
[…] 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 […]
3 Girma // Aug 6, 2008 at 7:51 pm
what is the benefit of using an iframe, can we just use any other html element like div?
4 Tomas // Aug 7, 2008 at 11:02 am
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
5 Jonathan Lister // Aug 7, 2008 at 2:59 pm
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.
6 outaTiME at refinn dot com » Blog Archive » Introducing HTML into an iframe and getting it back // Aug 11, 2008 at 7:06 pm
[…] 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 […]
7 Dylan // Sep 24, 2008 at 6:24 pm
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?
8 Noei // Sep 30, 2008 at 10:30 pm
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.
Leave a Comment