Eine der nützlichsten Techniken von DHTML ist die Fähigkeit, Inhalte externer HTML- Dateien via einen iframe Buffer in einen CSS Layer zu laden. Diese Technik hat viele Vorteile gegenüber dem Laden von Inhalten in einen Iframe, denn Sie haben dadurch die Möglichkeit, die Vorteile eines Layers - Positionierung, Z-Index, Sichtbarkeit, etc. - zu nutzen. Zudem erhalten Sie den zusätzlichen Benefit, dass der Layer transparent ist, so dass Sie den Inhalt über Hintergründe, Bilder, andere Inhalte, etc. legen können.
Werfen wir einen Blick auf das Script, welches Eddie Traversa und Jeff Rouyer entwickelt haben.
Es gibt zwei entscheidende Teile, eine ist die zu ladende Seite, die andere das Script selbst. Beginnen wir mit der externen HTML- Datei, die in die aktuelle Seite geladen werden soll.
</head>
<body
Die Seite, die extern geladen wird, ist ein normales HTML- Dokument, welches jeden Inhalt einer üblichen HTML- Seite zwischen <body> und </body> enthalten kann, also Bilder, Applets, Flash- Movies, und und und. Wichtig ist, dass dem Dokument- Body eine ID vergeben wird. Im obigen Beispiel verwenden wir id="theBody". Ein anderes wichtiges Detail ist der Einsatz eines onload EventHandlers, um einen Bug in NS6 zu kaschieren. Hier setzen wir onload="parent.showPage('contentLayer')" ein, womit wir zurück zur Funktion showPage() in der Hauptseite referenzieren, indem wir die parent Referenz einsetzen und dann den Layer definieren, der unter Verwendung des id Arguments im showPage() Script geladen werden soll, in diesem Beispiel also contentLayer.
Die Haupseite sieht folgendermassen aus:
<script language="JavaScript"> var nn4= (document.layers); var nn6= (document.getElementById && !document.all); var ie4= (document.all && !document.getElementById); var ie5= (document.all && document.getElementById); function loadPage(id,nestref,url) { // Ändern Sie den folgenden Wert, um den Layer weiter oder schmäler zu machen content_width = 550; if (nn4) { var lyr = (nestref)? eval('document.'+nestref+'.document.'+id) : document.layers[id] lyr.load(url,content_width) } else if(ie4) parent.contentFRM.location = url; else if(ie5 || nn6) document.getElementById('contentFRM').src = url; } function showPage(id) { if (ie4) { document.all[id].innerHTML = parent.contentFRM.document.body.innerHTML; } else if(nn6 || ie5) { document.getElementById(id).innerHTML = window.frames['contentFRM'].document.getElementById('theBody').innerHTML; } } </script> <title>Ein Titel</title></head> <body> <a href="javascript:loadPage('contentLayer',null,'load1.htm')">Lade Seite 1</a> <br><Br> <a href="javascript:loadPage('contentLayer',null,'load2.htm')">Lade Seite 2</a> <Br><Br>
function loadPage(id,nestref,url) { // Ändern Sie den folgenden Wert, um den Layer weiter oder schmäler zu machen content_width = 550; if (nn4) { var lyr = (nestref)? eval('document.'+nestref+'.document.'+id) : document.layers[id] lyr.load(url,content_width) }
else if(ie4) parent.contentFRM.location = url;
else if(ie5 || nn6) document.getElementById('contentFRM').src = url; }
function showPage(id) { if (ie4) { document.all[id].innerHTML = parent.contentFRM.document.body.innerHTML; }
else if(nn6 || ie5) { document.getElementById(id).innerHTML = window.frames['contentFRM'].document.getElementById('theBody').innerHTML; } } </script>
<title>Ein Titel</title></head>
<body>
<a href="
<br><Br>
<Br><Br>
<iframe name="contentFRM" id="contentFRM" width="0" height="0" frameborder="0"> </iframe> <div id="contentLayer" style="position:absolute; width:345px; height:115px; z-index:1; left: 186px; top: 304px"></div> </body> </html>
<div id="contentLayer" style="position:absolute; width:345px; height:115px; z-index:1; left: 186px; top: 304px"></div>
</body> </html>
Sehen wir uns zuerst einmal an, was die Body- Sektion enthält, bevor wir uns mit dem Script befassen. Als erstes gilt es, einen CSS- Layer zu erstellen, also einen DIV- Bereich, dessen Eigenschaften mit Style Sheets definiert werden:
Dann benötigen wir einen unsichtbaren Iframe, der als Buffer agiert.
Wie bereits in anderen Beispielen erwähnt, ist es wichtig, sowohl das name- als auch das id- Attribut zu notieren, der Grund ist ein weiterer Netscape 6 Bug. In diesem Beispiel verwenden wir hierfür contentFRM.
Nun zum Script:
Als erstes erstellen wir einen Browser- Sniffer, um die Browser unterscheiden zu können.
Wir prüfen hier auf die Browser Netscape 4, Netscape 6, Internet Explorer 4 sowie Internet Explorer 5 und höher. Grund hierfür sind die zum Teil proprietären JavaScript- (DOM-) Auslegungen der Browserhersteller. Netscape 4 kennt den Befehl document.layers, aber nicht document.all oder document.getElementById, Netscape 6 kennt document.layers nicht mehr, kennt document.all nicht, dafür aber document.getElementById, IE 4 kennt document.layers nicht, document.getElementById noch nicht, dafür aber document.all, IE 5 und höher kennt sowohl document.all als auch document.getElementById, aber nicht document.layers, ein Umstand, der den Programmierern von JavaScript viel Verdruss bringt.
Die Funktion loadPage() wird verwendet, um den Inhalt in einen Iframe bei Netscape 6 und Internet Explorer Versionen zu laden:
else if(ie4) parent.contentFRM.location = url; else if(ie5 || nn6) document.getElementById('contentFRM').src = url; }
Drei Argumente werden in der Funktion verwendet, id, nestref, und url . Die id wird benötigt, um den iframe im Falle des Internet Explorers 4 & 5+ sowie Netscape 6 zu bezeichnen, während für Netscape 4 damit die id des Layers bestimmt wird. Das nestref Argument erlaubt "eingenistete" Layer in Netscape 4 und die url gibt an, von wo der Inhalt geladen wird.
Das Script beginnt mit der Spezifizierung einer Bedingung für Netscape 4 und erstellt dann eine Variable namens lyr, welche eine spezifische Referenz zum Layer verwendet, um Probleme mit eingenisteten Layern bei Netscape 4 Browsern zu vermeiden. Netscape 4 besitzt die Möglichkeit, Inhalte direkt in einen Layer zu laden, indem man das Load Kommando verwendet.
Der content_width Befehl definiert die Breite des Layers.
Wir setzen eine weitere Bedingung für IE4 und verwenden folgende Zeile, um den URL der zu ladenden Seite zu bestimmen.
Für Internet Explorer 5 und Netscape 6 besteht keine Notwendigkeit, die parent location zu spezifizieren, wir greifen hingegen direkt auf die id des iframe zu, indem wir document.getElementById() einsetzen:
Nachdem die externe Seite in den iframe geladen wurde, müssen wir den Inhalt in einen Layer umladen. Dazu verwenden wir folgende Funktion:
Dies ist für Netscape 4 nicht notwendig, da wir hier den Inhalt direkt in den Layer laden konnten, Sie erinnern sich? ;-) Als nächstes konzentrieren wir uns auf die Verwendung von innerHTML, welche Netscape 6 und Internet Explorer Versionen interpretieren. Leider benötigen wir eine andere Referenz bei Internet Explorer 4 als bei Internet Explorer 5 und Netscape 6.
Hier verwenden wir also das proprietäre document.all für IE4, darin setzen wir das id Argument ein, um den Layer, in welchen die Inhalte geladen werden, zu identifizieren, danach weisen wir den Browser an, innerHTML zu verwenden. innerHTML spezifiziert den Inhalt im document body des Iframes "contentFRM" welcher sich im parent Dokument befindet.
Die gleiche Logik wenden NS6 und IE5+ (mit einigen kleinen Unterschieden im Detail) an. Wir verwenden document.getElementById(id).innerHTML = um den Browser anzuweisen, das Folgende zu schreiben, window.frames (in diesem Falle contentFRM), um den Namen des Frames zu spezifizieren, dann ermitteln wir die id des Body des externen Inhalts mit document.getElementById('theBody') und schlussendlich wenden wir innerHTML an.
Zuletzt nehmen wir die Funktion des EventHandlers, um die Seite zu laden, unter die Lupe:
Um die Kompatibilität mit der Macintosh Plattform zu gewährleisten, verwenden wir javascript:loadPage(), danach setzen wir unsere Argumente ein, um die id des Layers zu spezifizieren, wir fügen eine null- Referenz für nested Layers ein und zum Schluss definieren wir das Dokument, das geladen werden soll.
That's it, have fun with this!
Ein Beispiel zum Betrachten finden Sie hier
