„innerHTML” für Netscape 4
^{Kristof Lipfert
Dipl.-Des.(FH)}

Web-Design Beispiel zu den Tutorien JavaScript für alle Browser und CSS für alle Browser, innerHTML

Mit einem neuen innerHTML für den Browser Netscape 4 soll das Konzept einer einheitliche Syntax bei JavaScript, HTML und CSS für alle üblichen Browser ab Version 4 fortgeführt werden.

Ein DOM ?

Auch wenn innerHTML vom W3C nicht vollständig abgesegnet, sondern eher toleriert wird, ist die Ermöglichung des Quasi-Standards innerHTML für Netscape 4 ein großer Fortschritt.

Wege zu innerHTML

Netscape 4 kann dynamisch Layerinhalte austauschen, Layer meint hier ganz konkret den proprietären Layertag. Zur Verwendung des Layertags kommt noch die kaum zu umgehende Einschränkung der Dynamik des "DHTML" beim Netscape 4; dieser Browser reagiert nicht automatisch auf veränderte Seitenteile, damit beschränkt sich der Austausch auf die vorhandene Seitenstruktur. Layer werden, adressiert gemäß der Verschachtelung, geöffnet und neu geschrieben:

with (document.layers[0].document.layers['dynamisch']){
document.open();
document.write('Neuer Text');
document.close();
}

Da der nicht W3C konforme Layer-Tag ausser vor bleiben soll, gilt es positionierte Divs anzusprechen. Über die ja, wie im vorherigen Kapitel ausgeführt, für Netscape 4 neu geschaffene Funktion getElementById wird das automatisch erstellte Array aller vorhandenen Layer angesprochen, es gilt also diese Adressierung um innerHTML zu erweitern.

Wenn es wie hier darum geht unter Netscape 4 auf Divs zuzugreifen wird oft behauptet die jeweiligen Divs müßten mittels position:absolute ausgezeichnet sein um als Layer ansprechbar zu sein. Bereits im vorherigen Kapitel war am Beispiel der visibility erkennbar daß ein position:relative ausreicht.

Allerdings kann ein solches Ansprechen relativer Divs mit write(); close(); sich, anders als bei der Visibility, auf Divs in der gleichen Verschachtelungsebene auswirken. Die einfachste Lösung erfordert also für Netscape 4 jedes per "innerHTML" angesprochene Div in einen zusätzlichen Container zu setzen:

<div><div id=dynamisch>
 Aletr Text
</div></div>

Je nach Vorgehensweise hat es Vorteile im bearbeiteten Div einen ansprechbaren Layer zu erzeugen. So kann auch die Position des neuen Inhalts besser kontrolliert werden, der neue Layer erhält die nötigen Angaben. Auch mittles Ilayer, das entspricht einer relativen Positionierung, kann eine Position per top, left oder pagex und pagey angepasst werden.

Fazit innerHTML für Netscape 4

Meine Entscheidung für ein sehr flexibles innerHTML, welches dann auch auf unverschachtelte und relativ prositionierte Divs angewandt werden kann, fällt hier erstmal auf eine noch unproblematischere Methode: Es wird gleich ein neuer Layer erzeugt, der an der Position des zu ersetzenden Div platziert wird. Der zu ersetzende Layer bzw. das gegebene Div wird dazu noch unsichtbar gemacht. Ohne weitere Maßnahmen macht sich allerdings der Resizebug bemerkbar.

Der Code

Die neue Möglichkeit innerHTML wird in die bereits dargelegte Funktion getElementById integriert.

  1
  2
  
  9





 13

/*  Kristof Lipfert Duesseldorf (c) 2002            */
/*  innerHTML fuer NC 4                             */

window.id_var=id_var; 
window.id_varIH=getLayerById[window.id_var].innerHTML;
window.setTimeout(doInnerHTML,9);



function doInnerHTML(){
if(getLayerById[window.id_var].innerHTML!==window.id_varIH){
document.ids[id_var].color=getLayerById[id_var].color;
if(!window[id_var+'iH']){
window[id_var+'iH']=new Layer(250);
window[id_var+'iH'].top=getLayerById[window.id_var].pageY;
window[id_var+'iH'].left=getLayerById[window.id_var].pageX;
getLayerById[window.id_var].visibility='hide';}
with(window[id_var+'iH']){
document.write(''+
 getLayerById[window.id_var].innerHTML+'');
document.close();
visibility='show';}
}}

Die Einbindung des Scripts kann am Ende des HTML nach dem body oder per onload erfolgen. Für Netscape 4 wäre eine Einbindung auch über eine JSSS Datei und eine Funktion window.onload= vorstellbar.

Kaum mit einem universellen Script abzufangen sind die Unzulänglichkeiten des Browsers Netscape 4 bei der Vererbung von CSS Eigenschaften, deswegen würde ein im Ausgangsdiv oder -layer erzeugter neuer Layer auch für einzelne InnerHTML-Aktionen keine großen Vorteile bringen. Falls die Beziehungen und Schachtelungen der Divs wichtig sind können übrigens auch Hierarchie und z-index per JavaScript angepasst werden. Immerhin Netscape 4 befolgt die vorhandenen Styleanweisungen, als einfache Anwendung habe ich hier ein Span Tag im erzeugten Layer mit der ID des ersetzten Divs angelegt, und der erzeugte Layer ist auch eindeutig ansprechbar (alteID+'iH').

innerHTML für alle Browser?

Bei Mozilla (und Opera soweit bei diesem Browser die JavaScript-Fähigkeiten ausgebaut werden) geht der Trend zur Unterstützung von innerHTML. Dennoch mag es mit innerHTML Probleme geben, in einem solchen Fall kann es helfen per JavaScript Browserweiche bestimmte Browser doch extra anzusprechen und das jeweilige DOM anzuwenden.

Code vollständig

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44

/*   Kristof Lipfert Duesseldorf (c) 2001, 2002             */
/*   getElementId fuer InternetExplorer 4 und Netscape 4    */
/*   innerHTML fuer Netscape 4                              */

if(!document.getElementById){
 function getElementById(id_var){
  if(document.all)return document.all[id_var];
  else if(document.ids){

window.id_var=id_var; 
window.id_varIH=getLayerById[window.id_var].innerHTML;
window.setTimeout(doInnerHTML,0);

return getLayerById[id_var];}}
document.getElementById=window.getElementById;
if(document.ids){

function doInnerHTML(){
if(getLayerById[window.id_var].innerHTML!==window.id_varIH){
document.ids[id_var].color=getLayerById[id_var].color;
if(!window[id_var+'iH']){
window[id_var+'iH']=new Layer(250);
window[id_var+'iH'].top=getLayerById[window.id_var].pageY;
window[id_var+'iH'].left=getLayerById[window.id_var].pageX;
getLayerById[window.id_var].visibility='hide';}
with(window[id_var+'iH']){
document.write('<span id='+id_var+'>'+
 getLayerById[window.id_var].innerHTML+'</span>');
document.close();
visibility='show';}
}}

var getLayerById=[];
function doLayerArray(){ 
with([window.document]){
while(length){with(shift()){
for(i=0;i<layers.length;i++){
getLayerById[layers[i].id]=
layers[i].style=layers[i];
unshift(layers[i].document);
}}}}}
doLayerArray();
}}

08/ 2002 © Copyright Kristof Lipfert Düsseldorf