Entry
Can I load an external html file into a layer?
Apr 14th, 2000 07:51
Martin Honnen,
NN4 allows to set the src of a positioned element to a url thereby
loading the html into the layer.
Statically with css:
<STYLE>
#layerName {
position: absolute;
include-source: url(http://javascript.faqts.com/);
}
</STYLE>
Dynamically with js:
document.layerName.src = 'http://javascript.faqts.com';
or
document.layerName.load('url', newWidthOfLayerInPixels);
Check
http://www.faqts.com/knowledge-base/view.phtml/aid/1271/fid/128/lang/en
for problems involved.
IE4/5 and NN6 separate the concept of positioning and external source.
You need to use an IFRAME or an OBJECT element to load an external
source into an HTML element.
IE4 dhtml scripters therefore often took efforts to have a hidden FRAME
or IFRAME around to load files into and then use the innerHTML
properties to copy the source to a positioned DIV (or other positioned
element). See an example below.
Fortunately IE5 frees you from that burden with the download behaviour
described in
http://www.faqts.com/knowledge-base/view.phtml/aid/1268/fid/126/lang/en
That allows you to load a source from a url and copy it into a
positioned DIV.
Here is the IE4/5 example of using JavaScript to create a hidden IFRAME
and load the file into it to allow for copying of its content once it
is loaded. Note that the code also contains NN6 code branches which due
to bugs in NN6PR1 do not work as intended. It doesn't disturb the IE
functionality however.
<HTML>
<HEAD>
<SCRIPT>
function FileLoader (url, onload) {
this.id = FileLoader.cnt;
FileLoader.elements[FileLoader.cnt++] = this;
this.url = url;
this.onload = onload;
this.createIFRAME();
setTimeout('FileLoader.elements[' + this.id + '].loadDocument()', 5);
}
function FileLoader_createIFRAME () {
this.frameName = 'FileLoader' + this.id;
if (document.all) {
var html = '';
html += '<IFRAME ID="' + this.frameName + '"';
html += ' NAME="' + this.frameName + '"';
html += ' STYLE="display: none;"';
html += ' SRC="about:blank">';
html += '<\/IFRAME>';
document.body.insertAdjacentHTML('beforeEnd', html);
}
else if (document.getElementById) {
var ifr = document.createElement('IFRAME');
ifr.id = ifr.name = this.frameName;
ifr.style.visibility = 'visible'; // just for testing
ifr.width = 300; ifr.height = 100;
ifr.src = 'about:blank';
document.body.appendChild(ifr);
}
}
FileLoader.prototype.createIFRAME = FileLoader_createIFRAME;
function FileLoader_loadDocument (url) {
if (url)
this.url = url;
this.loaded = false;
this.document = null;
var ifrWin =
document.all ? document.frames[this.frameName] :
window.frames[this.frameName];
var html = '';
html += '<HTML>';
html += '<BODY ONLOAD="';
//html += 'alert(event.type);'; // just for testing
html += 'var fl = top.FileLoader.elements[' + this.id + '];';
html += 'fl.loaded = true;';
html += 'fl.document = window.frames[0].document;';
html += 'fl.onload(fl.document);';
html += '"';
html += '>';
html += '<IFRAME SRC="' + this.url + '">';
html += '<\/IFRAME>';
html += '<\/BODY>';
html += '<\/HTML>';
ifrWin.document.open();
ifrWin.document.write(html);
ifrWin.document.close();
}
FileLoader.prototype.loadDocument = FileLoader_loadDocument;
FileLoader.cnt = 0;
FileLoader.elements = new Array();
</SCRIPT>
<SCRIPT>
var fl;
function loadHandler (document) {
if (document.all)
alert(document.body.innerHTML)
else
alert(document.getElementsByTagName('*').length);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<A HREF="javascript: void 0"
ONCLICK="fl = new FileLoader('whatever.html', loadHandler); return
false;"
>
new FileLoader
</A>
|
<A HREF="javascript: void 0"
ONCLICK="fl.loadDocument('whatelse.html'); return false;"
>
load htmlTesting.html
</A>
<BR>
</BODY>
</HTML>
