I have an entire html document contained in a javascript string variable and I need to render it into a portion of my page. Have I to use frames? How to do that?
A:
document.getElementById('container').innerHTML = string;
This will load the contents of the string inside of an element (probably a div) with the id of "container".
cpharmston
2009-09-14 15:20:54
A:
myHtmlString = 'some stuff'; // whatever your big html string is
el = document.getElementById("myTarget"); // where you'd like the html to end up
el.innerHTML = myHtmlString; // set the HTML of el to be your big string.
inkedmn
2009-09-14 15:21:58
+3
A:
With an iframe:
<iframe id="myiframe"></iframe>
var frame= document.getElementById('myiframe');
var doc= frame.contentDocument? frame.contentDocument : frame.contentWindow.document; // IE compatibility
doc.open('text/html');
doc.write(documenthtml);
doc.close();
Or, if you can cut off the bits you don't want (like any DOCTYPE and <head> element), you can just write innerHTML to any element. Normally handling [X][HT]ML with regexp or string processing is a really bad idea, but if you know that the body will always be contained within the exact strings ‘<body>...</body>’ and there will never be eg. any ‘<body>’ sequence hidden in a comment or script section, you might be able to get away with it.
To be honest, browsers at the moment are so forgiving they will typically even let you write a whole HTML document to a div's innerHTML, complete with doctype and ‘<head>’ in there! But that would be a bit naughty:
<div id="mycontent"></div>
document.getElementById('mycontent').innerHTML= htmldocument;
Here's a nasty hack combining both methods, to extract the body content without the use of regex:
<div id="mycontent"></div>
var frame= document.createElement('iframe');
frame.style.display= 'none';
document.body.appendChild(frame);
var doc= frame.contentDocument? frame.contentDocument : frame.contentWindow.document;
doc.open('text/html');
doc.write(documenthtml);
doc.close();
document.getElementById('mycontent').innerHTML= doc.body.innerHTML;
document.body.removeChild(frame);
bobince
2009-09-14 15:27:16
Or, well, the point is I get an entire html document (with <head> and DOCTYPE) and the user can modify it via a text area and I want to offer a preview rendering. So when I read you I see iframe could do the job. Thanks !
Azuriel
2009-09-14 15:36:06
Old school `document.write` FTW. Nice one.
Crescent Fresh
2009-09-14 15:48:10
Yeah, if you want to let them edit a whole document with stylesheet and choosing their own rendering mode via doctype, the only way to preview that consistently is by putting it in its own independent iframe.
bobince
2009-09-14 16:13:57
What is that 'text/html' you're passing to `doc.open` for?
kangax
2009-09-14 19:08:28
Also, ternary can be dropped - `var doc = frame.contentDocument || frame.contentWindow.document;`
kangax
2009-09-14 19:09:38
Yeah, you may be able to get away with omitting the mimetype or even the whole `document.open()` call if you prefer (it's not wholly documented whether `document.write` should auto-open when there is no previous document, but it does work in browsers I've seen).
bobince
2009-09-14 19:57:18
@bobince, it's just that I've never seen myme-type passed to document.open like that. Does it specify encoding of a document in question? Do you know which browsers actually support such thing?
kangax
2009-09-14 20:04:45
Oh, it goes back to the beginnings of JavaScript (1.0) on Netscape — old habits! See http://docs.sun.com/source/816-6408-10/document.htm, which says you can pass various other types in. This didn't used to work on IE, so maybe the other browsers have dropped it too these days.
bobince
2009-09-14 20:50:51
Gotcha. Thanks.
kangax
2009-09-14 20:55:45