Browser Funktion script element layer Division getElementById

Blutiger Anfaenger sucht Cross-Browser JS-Loesung

Von: , Frage gestellt am Fr, 15. Dez 2000

Hallo allerseits,

ich bin noch blutiger Anfaender in Sachen JavaScript und es geht mir darum fuer alle zur Zeit wichtigen Browser (Netscape4/6, Internet Explorer4/5 sowie Opera5) eine moeglichst effiziente Funktion zu finden, um in ein absolute positioniertes Container-Element (z.B. div mit position:absolute;) dynamisch per JavaScript einen HTML-String reinzubringen. Dazu habe ich mir bis jetzt folgendes gedacht und entwickelt:

Gehen wir davon aus, wir haben 5 Boolean-Variablen, die je nachdem welcher Browser detektiert worden ist auf true oder false stehen:

bIsNS4 = true|false; // Netscape4
bIsNS6 = true|false; // Netscape6
bIsIE4 = true|false; // InternetExplorer4
bIsIE5 = true|false; // InternetExplorer5
bIsOP5 = true|false; // Opera5

In einer Funktion wird nun ein String fuer das Div-Element concat-iniert. Z.B. eine Table wie folgt:

var strForDiv = "<table border='1' cellpadding='1' cellspacing='1' bgColor='yellow' summary='Table'>";
strForDiv += "<tr align='center'><td valign='middle'>";
strForDiv += "BINGO";
strForDiv += "<\/td><\/tr><\/table>";

Dieser String soll nun einer weiteren Funktion per Aufruf uebergeben werden, die diesen Inhalt (natuerlich Browser abhaengig) in die Division reinschreibt:

<div id="idDiv"></div>

Der Aufruf erfolgt so:

writeStrToLyr(strForDiv,"idDiv");

Die aufgerufene Funktion sieht zur Zeit so aus:

function writeStrToLyr(prmString,prmId)
{
var objDiv = getLyrReference(prmId);

if (!objDiv) return;

setLyrVisibility(false,objDiv);

if (bIsNS4) {
with (objDiv.document) {
open("text/html","replace");
write(prmString);
close();
}

} else if (bIsIE4||bIsIE5||bIsNS6) {
objDiv.innerHTML = prmString;

} else if (bIsOP5) {
// TODO: Opera5 Browser Code goes here.
}

setLyrVisibility(true,objDiv);
}

function setLyrVisibility(prmVisible,prmLayer)
{
if (!prmLayer) return;

if (bIsNS4)
prmLayer.visibility = prmVisible ? "show" : "hide";
else
prmLayer.style.visibility = prmVisible ? "visible" : "hidden";
}

function getLyrReference(prmId)
{
if (!prmId) return(null);

if (bIsNS4)
return(window.document.layers[prmId]);

if (bIsIE4)
return(window.document.all[prmId]);

if (bIsIE5||bIsNS6||bIsOP5)
return(window.document.getElementById(prmId));

return(null);
}

writeStrToLyr() beschreibt die "Layer" auch wenn es nicht dem DOM-Standard entspricht (aber es soll ja funktionieren und moeglichst einfach sein). setLyrVisibility() setzt Cross-Browser-maessig die Visibility (wegen flickering oder auch nicht). getLyrReference() soll sich die ensprechende Referenz auf die Division -falls vorhanden- holen.

Ich denke die Frage ist klar. Bis dato habe ich selbst keine fuer mich befriedigende Loesung gefungen :-)
Wer kann mir da weiterhelfen?

Danke im vorraus

CIAO

15 Antworten zu dieser Frage

1. Antwort von nach 2 Stunden hilfreich

   Re: Blutiger Anfaenger sucht Cross-Browser JS-Loes

   blutiger anfänger :)
   
   es sieht schlimmer aus als es ist, in der theorie. ok ich habs einigermassen verstanden. xbrowser ist ein geiles thema. aber kannst du nochmals DIE FRAGE stellen. das war jetzt dein projekt. aber die präzise frage könnte eventuell schneller zum erfolg führen. könntest du nochmal sagen waurm man getRefrn o.so ähnlich überhaupt benötigt?
   
   1again.
   

   • Antwort von nach 3 Stunden hilfreich

     Re^2: Blutiger Anfaenger sucht Cross-Browser JS-Lo

     Hallo,
     
     was mir fehlt ist der Source-Code in der Methode "writeStrToLyr()" und zwar dort wo der Kommentar // TODO: steht. innerHTML versteht naemlich der Opera nicht.
     
     Mit getLyrReference() hole ich mir nur Cross-Browser-maessig eine Referenz auf eine Division mit position:absolute; unter Angabe des id-Attributes. Ich kann ja in meinem HTML-Dokument mehere div`s haben, z.B.:
     
     <div id="idDiv1"></div>
     <div id="idDiv2"></div>
     <div id="idDiv3"></div>
     usw.
     
     So brauche ich nicht fuer jeden Container eine extra Funktion, sondern hole sie mir einfach ueber meine selbst geschriebene Funktion "getLyrReference()", was in allen Browsern funzt.
     
     in "writeStrToLyr()" brauche ich ja diese Referenz um ueber
     
     objDiv.document.write("...");
     oder
     objDiv.innerHTML = "...";
     
     den Inhalt des Containers zu aendern.
     Wo ich aber zur Zeit nicht weiter komme ist eine Loesung, wie ich das mit dem Opera5 mache.
     
     Ich hoffe mein Problem ist jetzt klarer ausgedrueckt.
     
     CIAO
     

     • Antwort von nach 3 Stunden hilfreich

       Re^3: Blutiger Anfaenger sucht Cross-Browser JS-Lo

       etwas, aber es liegt an meiner unwissenheit. pass auf, kann denn der opera5 schon ein wenig dom? ich glaubs ja nicht, aber es kann sein. also stefan mintert rät in seinem buch von opera5 ab und verflucht das ding. wie auch immer. wenn opera5 dom kann, dann kann man ja über childnodes wunderbar inhalte austauschen. dann brauchst du nicht mal mehr deine umständlichen div-container. :)
       
       z.b.
       
       function test1()
       {
       if (document.getElementById)
       {
       document.body.firstChild.nodeValue = "w3c";
       }
       }
       
       damit kann man ganz normalen text in diesem fall lose rumliegenden text innerhalb des body-tags umschreiben.
       
       könnte dir das weiterhelfen?
       

       • Antwort von nach 3 Stunden hilfreich

         Re^4: Blutiger Anfaenger sucht Cross-Browser JS-Lo

         Hallo,
         
         danke fuer Deinen Tip, aber leider geht das nicht. An sowas dachte ich aber auch schon mal.
         Wenn ich ueber firstChild gehe, dann ist der Zugriff null und es gibt einen JavaScript-Error. Denn die
         
         <div id="idDiv"></div>
         
         hat ja, wie Du siehst keinen weiteren Child!
         Das Problem koennte man umgehen, wenn wann folgendes macht:
         
         <div id="idDiv">�</div>
         
         Dann hat die Division eine Child und objDiv.firstChild ist not null. Das Problem folgt erst noch:
         
         firstChild.nodeValue = prmString;
         
         schreibt mir REINEN Text (also plain) in die Division rein und nicht einen String (als HTML Interpretation).
         
         prmString als Parameter der Funktion ist ja bei mir die Variable strForDiv. Also einen HTML-Auszeichnung, die ein Tabelle mit einer Zelle darstellen so. Die Tabelle ist gelb hinterlegt und in der Zelle steht als Beispiel "Bingo" drin. Das ist was anderes als wenn nur Text reingeschrieben wird!
         
         Aber danke nochmal...
         
         CIAO
         

         • Antwort von nach 4 Stunden hilfreich

           Re^5: Blutiger Anfaenger sucht Cross-Browser JS-Lo

           Meinte natuerlich folgendes:
           
           <div id="idDiv">& nbsp ;</div>
           
           ohne blanks dazwischen versteht sich.
           

         • Antwort von nach 4 Stunden hilfreich

           Re^5: Blutiger Anfaenger sucht Cross-Browser JS-Lo

           und wenn du VORHER per DOM ein Element setzt:
           
           var neuesElement = document.createElement("P")
           
           erzeugt z.B. einen neune Textabsatz der lose im Dom-Baum liegt mit appendChild kannst du diesen dann an ein beliebges dom-ojbekt dranhängen. hab ich zwar schonmal gemacht aber ích weiss nicht wie sicher das auf den angeblichen dom-fähigen brausern ist.
           

           • Antwort von nach 4 Stunden hilfreich

             Re^6: Blutiger Anfaenger sucht Cross-Browser JS-Lo

             Ja,
             
             das befuerchte ich mittlerweile auch.
             Mit createElement(), setAttribute(), appendChild() sowie nodeValue sollte es vielleicht gehen. Ich habe es noch nicht ausprobiert, weil es naemlich einen ganz schoenen Aufwand bedeutet. Selbst bei einer einfachen Tabelle wie in meinem Beispiel angegeben:
             
             <table border="1" cellspacing="1" cellpadding="1" bgColor="yellow" summary="Table">
             <tr align="center"><td valign="middle">
             BINGO
             </td></tr>
             </table>
             
             muss man ganz schoen verdammt viel Code schreiben. Das ging frueher viel einfacher und aus diesem Grunde kann ja der NS6 nun auch wie der IE innerHTML. Irgendwie ist das schon tragisch und traurig zugleich, dass der Opera da nicht auch einen Ersatz hat.
             
             Aber danke nochmal...
             
             BYE
             

           • Antwort von nach 2 Tagen hilfreich

             Re^7: Blutiger Anfaenger sucht Cross-Browser JS-Lo

             hmmm dann weiss ich leider auch nicht mehr tut mir leid aber wenn du was hast, sei dochso lieb und poste es hier noch :) sag mal opera5, wer surft denn mit dem? oder muss du dass ganz einfach beruflich erfüllen?
             
             grüsse
             

           • Antwort von nach 3 Tagen hilfreich

             Re^8: Blutiger Anfaenger sucht Cross-Browser JS-Lo

             Hallo SuperTurk,
             
             noch surfen nicht viele mit dem Opera - denke ich mal. Aber wenn man sich den Browser mal anschaut, dann ist der wirklich nicht so schlecht. Auf alle Faelle ist er klein, lite und sehr schnell. Nach meiner Meinung nach ein echtes Konkurenzprodukt zu Netscape6. Insbesondere auch deshalb, weil AOHell/Netscape keinen grossen Aufstand machen, den Netscape wirklich im Markt durchzupressen wie Opera z.B.
             Die Weiterentwicklung steht echt in den Sternen im Gegensatz zum Mozilla-Browser, den es ja schon als M19 gibt und so wie ich gesehen habe, viel stabiler und wesentlich mehr kann als NS6 (z.B. auch schon hover-Effekte für Blockelement wie dem p-Tag). Das kann noch nicht mal der IE5.
             Asserdem hat NeoPlanet angekuendigt, einen eigenen Browser auf Mozilla-Basis im naechsten Jahr rauszugeben.
             
             Im Endeffekt ist es so, dass ich versuche, Scripte zu schreiben, die nie direkt Core- und Reference-Javascript-Methoden aufrufen, weil diese -insbesondere bei Core-Funktionen stark Browser-abhaengig sind es auch bleiben werden. W3C versucht ja nur Reference-Methoden zu standardtisieren.
             Es geht also darum eine JS-Library zu entwickeln und man so nur Methoden ueber diese Library aufruft und niemals direkt in einer HTML-Datei. Der Trick liegt darin, dass man bei signifikanten Aenderungen nur die Library modifizieren muss und schon funktionieren alle meine Scripte mit der neuen Version. Man muss also nicht muehselig Script fuer Script individuell anpassen.
             
             Der Nachteil ist allerdings, dass man immer die Library ueber script src=... mit inzubinden muss und dies demnach die Ladezeit erhoeht und man auch fuer manches Script nicht alle Methoden der Library benoetigt. Aber 20-30 kB sind nicht so gross, dass man sich da Gedanken machen muss. Manches Gif/jpg-Bild hat ja schon so eine Groesse.
             Vorteil ist, dass externe Scripte gecached werden und nur einmalig geladen werden, auch nach einem Reload. Einmal das Script laden und alle Seiten haben Zugriff auf das Script.
             
             Ich kenne zwar einige Libraries schon, wie over-lib, dhtml-lib oder dynAPI von www.dansteinman.com, aber sie sind nicht leistungsfaehig genug, oder zu individuell oder veraltet.
             
             BYE
             

• « Zurück
• 1
• 2
• Vorwärts »

Keine passende Antwort gefunden? Jetzt eigene Frage stellen!