Entry
I need to copy the body of a html page into a DIV using an IFRAME as a buffer. How do I time that?
Nov 29th, 2000 10:56
Martin Honnen,
IE4 and NN6 can both load external HTML pages into IFRAMEs or OBJECTs
but then you loose the transparency and z-index stacking (IE5.5 has
corrected that but this entry is about IE4 and NN6). So usually people
use a hidden IFRAME as a buffer and load the content from the IFRAME
into the DIV. Timing that however is difficult. The following uses a
further indirection with a nested iframe to provide an onload handler
to precisely transfer the content of the iframe when it has loaded:
<HTML>
<HEAD>
<TITLE>
</TITLE>
<STYLE>
</STYLE>
<SCRIPT>
function loadPage(url, divID) {
if (!window.buffer) {
var html = '';
html +=
'<IFRAME ID="buffer" NAME="buffer" STYLE="display: none;"><\/IFRAME>';
document.body.insertAdjacentHTML('beforeEnd', html);
}
var frame = window.frames['buffer'];
var html = '';
html += '<HTML><BODY ONLOAD="top.document.all[\'' + divID
+ '\'].innerHTML = window.buffer.document.body.innerHTML;">';
html += '<IFRAME NAME="buffer" SRC="' + url + '"></IFRAME>';
html += '<\/BODY><\/HTML>';
frame.document.open();
frame.document.write(html);
frame.document.close();
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="jsInterpreter.html"
ONCLICK="loadPage(this.href, 'aDiv'); return false;"
>
load yahoo
</A>
<DIV ID="aDiv"
STYLE="position: absolute;
overflow: auto;
width: 200px; height: 200px;
left: 200px; top: 200px;
"
>
Kibology for all.
</DIV>
</BODY>
</HTML>
This technique works well with IE4/5 and should work with NN6 once they
have fixed bugs regarding the onload handler.
