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");
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;
- doc = iframe.contentDocument; // For NS6
- else if(iframe.contentWindow)
- doc = iframe.contentWindow.document; // For IE5.5 and IE6
- // Put the content in the iframe
- // 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.