Display an entire html documention into a frame

StackOverflow https://stackoverflow.com/questions/1422093

  •  07-07-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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);

OTHER TIPS

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".

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.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top