6. Inhalte austauschen
In allen Browsern lässt sich der Inhalt eines Layers auch nach dem Laden des Dokuments austauschen. Beim Internet Explorer und Mozilla/Netscape 6 ist dies sogar mit jedem Tag möglich, da jedes Element die Eigenschaft innerHTML besitzt, über die man alles auslesen und ändern kann, was im Tag steht.
So wie beim Clipping ist das in älteren Versionen von Mozilla nicht möglich, da auch hier die Entwickler erst bei Milestone 16 auf den Microsoft- Kurs geschwenkt sind.
In Netscape 4 ist die Änderung tatsächlich auf den Layer beschränkt. Dort kann man das Layer- Dokument ändern, indem man auf das document-Objekt des Layers zugreift.
Beispiel
Quelltext:
<html>
<head><title>Inhalte austauschen</title>
<style type="text/css">
#L1 {
z-Index:2;
position:absolute;left:10px;top:130px;
width:150px;height:150px;
background-color:#FF0000;layer-background-color:#FF0000;
clip:rect(0,150px,150px,0);
}
#L2 {
z-Index:2;
position:absolute;left:180px;top:130px;
width:150px;height:150px;
background-color:#00FF00;layer-background-color:#00FF00;
}
</style>
<script language="javascript" type="text/javascript">
function writeNew(n)
{
nm="L"+n;
txt=document.forms[0].elements[0].value;
if(document.layers)
{with(document.layers[nm].document)
{open();write(txt);close();}}
else if(document.getElementById) {document.getElementById(nm).innerHTML=txt;}
else if (document.all) {document.all[nm].innerHTML=txt;}
}
</script>
</head>
<body>
<form>
Geben Sie einen Text ein: <input type=text size=20><br><br>
<a href="javascript:writeNew(1)">in den roten Layer schreiben</a><br>
<a href="javascript:writeNew(2)">in den grünen Layer schreiben</a><br>
</form>
<div id="L1">ein Text</div>
<div id="L2">ein anderer Text</div>
</body>
</html>
|
In diesem Beispiel sieht man: Netscape 4 zeigt den Hintergrund des Layers üblicherweise nur dort wo Text steht. Mit dem clip-statement für den roten Layer kann man das vermeiden.
Eine weitere Möglichkeit die neuere Browser bieten: man kann ganze HTML- Seiten in definierte Bereiche eines Dokuments laden.
In NS4 nimmt man dazu, wie bei allen dynamischen Dingen, den Layer. Dieser hat ein src- Attribut in das man einfach die HTML- Referenz schreibt.
Für Netscape 6 und den IE nehmen wir den sogenannten iframe, der im Prinzip ein eigener Frame ist, der aber via CSSP wie ein Layer positioniert werden kann.
Die stabilere Variante ist dabei sicher der iframe, da man bei NS4 schnell in Schwierigkeiten gerät, wenn man mehr als einen solch befüllten Layer verwendet und man etwa auf Funktionen die im externen HTML- File stehen nicht mehr zugreifen kann, sobald das File geladen ist.
Dennoch ist es manchmal recht praktisch diese Technik einzusetzen, vorallem dann, wenn man ein und dieselbe Funktionalität auf viele verschiedene Content-Files anwenden will.
Ein Beispiel wäre es etwa, eine Box in einer Seite darzustellen, die ihre eigenen Scrollbars hat und in die etwa Stories oder Diskussionsbeiträge geladen werden.
|
