homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

How do I load an external *.htm into a Div Tag
How do I load an external *.htm into a Div Tag

 2:42 am on Sep 15, 2006 (gmt 0)

I have asked the question in the CSS forum and have been pointed to ask here:

What I am looking for is a JS function to load a html into a <div> tag.

I had one some time ago and can only remember part of it as follows

function loadhtm(file,id);
dd=GetElementbyID(id); (or something like that)

can anyone help



 4:13 am on Sep 15, 2006 (gmt 0)

One approach is to load file into hidden iframe ( iframe.src="something.htm" ) and onload transfer content to div ( div.innerHTML = iframe.innerHTML ).

It can also be done with AJAX.

In both cases security may stop you if file is from different domain


 11:32 am on Sep 15, 2006 (gmt 0)

IFRAMEs don't seem to support the innerHTML property, even for local files. (?)


 1:48 pm on Sep 15, 2006 (gmt 0)

Use frame.document.body.innerHTML



 2:47 pm on Sep 15, 2006 (gmt 0)

IFRAMEs don't seem to support the innerHTML property, even for local files. (?)

Actually, that wasn't quite strictly true... there is an innerHTML property, but in both IE and FF it has the value "Iframe not supported!". In Opera it's simply an empty string.


Wow, yeah, (cheers Kaled) but this appears to be IE and Opera only. In Opera it works as expected, but in IE6 it returns the body of the parent document (eh?!) - the document that contains the IFRAME ...?!? (And where the contents of the IFRAME should be it says "Iframe not supported!".)

FF supports the contentDocument property (instead of 'document') and works as expected.

The function I was using...
// IE, Opera... iframe.document.body.innerHTML
// (But IE returns current (parent) document!?)
// FF... iframe.contentDocument.body.innerHTML
function getIframeContents () {
var obj = document.getElementById('myiframe');
if (obj.document) {
alert('iframe.document.body.innerHTML = ' + obj.document.body.innerHTML);
else if (obj.contentDocument) {
alert('iframe.contentDocument.body.innerHTML = ' + obj.contentDocument.body.innerHTML);

IE also has .outerHTML - but this just contains the IFRAME tags and doesn't give access to the document inside the IFRAME ("Iframe not supported!" message again.)

So, how do you get "frame.document.body.innerHTML" to work in IE?

------- ADDED ------

NB: This is just the <body> of the containing document, not the entire HTML file. But I guess you would have problems if you tried to insert and entire HTML file (<DOCTYPE><head> and all) into an already complete HTML document?!


 1:04 am on Sep 16, 2006 (gmt 0)

So, how do you get "frame.document.body.innerHTML" to work in IE?

You don't...

You write an onload event handler for the document in the <iframe>. That handler must locate the <div> in the parent window and assign its innerHTML value.


function copyToDiv() {
var div = parent.document.getElementById(targetDiv);
if (div) div.innerHTML = self.document.body.innerHTML;
<body onload="copyToDiv();">


Rambo Tribble

 4:31 am on Sep 16, 2006 (gmt 0)

Actually, it should be: frames[0].document.body.innerHTML


 7:41 am on Sep 16, 2006 (gmt 0)

Solution proposed by keled, is similar to what I use, and works fine.

Penders, for case of IE, add this to start of getIframeContents

if (obj.contentWindow) {
alert('innerHTML = ' + obj.contentWindow.document.body.innerHTML);
} else ...


 8:44 pm on Sep 16, 2006 (gmt 0)

Yeah, works a treat, daveVk's solution (above):
<IFRAME ELEMENT>.contentWindow.document.body.innerHTML
...is in fact all you need in order to grab the contents (body) of the document contained within the IFRAME (from outside the IFRAME - the parent document). Works in IE6, FF and Opera. (But not IE5, not sure what would work in IE5?!)

And Kaled's solution works great the other way round... to 'send' the contents (body) of the document in the IFRAME, from the IFRAME to the parent document. Works in everything I tried... IE5, IE6, FF and Opera.


 1:16 am on Sep 17, 2006 (gmt 0)

When using grab from outside method, how do you get reliable onload indication? Thread [webmasterworld.com...] indicates iframe.onload may not be reliable.

Rambo Tribble

 1:59 am on Sep 17, 2006 (gmt 0)

contentWindow debuted in IE 5.5 and NN 7. You might find some incompatibilities with older versions of many browsers and some newer ones. I'd say Dillo is probably out of the question, for instance.

I also have reason to believe it won't work in Safari.

[edited by: Rambo_Tribble at 2:17 am (utc) on Sep. 17, 2006]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved