Welcome to WebmasterWorld Guest from 54.226.189.112

Forum Moderators: open

Message Too Old, No Replies

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

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

     

Zaaka06

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

5+ Year Member



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

daveVk

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

WebmasterWorld Senior Member 5+ Year Member



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

penders

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

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

kaled

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

WebmasterWorld Senior Member kaled is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Use frame.document.body.innerHTML

Kaled.

penders

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

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.

frame.document.body.innerHTML

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?!

kaled

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

WebmasterWorld Senior Member kaled is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

e.g.


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

Kaled.

Rambo Tribble

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

WebmasterWorld Senior Member 10+ Year Member



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

daveVk

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

WebmasterWorld Senior Member 5+ Year Member



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

penders

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

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.

daveVk

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

WebmasterWorld Senior Member 5+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month