Blutiger Anfaenger sucht Cross-Browser JS-Loesung

Anonym · 15. Dezember 2000 um 12:13

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:wink: 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:

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

var strForDiv = „“;
strForDiv += „“;
strForDiv += „BINGO“;
strForDiv += „“;

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

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

Anonym · 15. Dezember 2000 um 14:43

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.

Anonym · 15. Dezember 2000 um 15:34

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.:

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

Anonym · 15. Dezember 2000 um 15:40

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?

Anonym · 15. Dezember 2000 um 16:11

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

hat ja, wie Du siehst keinen weiteren Child!
Das Problem koennte man umgehen, wenn wann folgendes macht:

�

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

Anonym · 15. Dezember 2000 um 16:13

Meinte natuerlich folgendes:

& nbsp ;

ohne blanks dazwischen versteht sich.

Anonym · 15. Dezember 2000 um 16:15

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.

Anonym · 15. Dezember 2000 um 16:47

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:

BINGO

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

Anonym · 15. Dezember 2000 um 20:33

Also ich glaube fast es gibt keine Loesung verdammt nochmal fuer den Opera. Bzgl. DHTML kann man an Opera nur nen Griff zum verschmeissen ranschrauben.

Hab mir jetzt die Spec unter:

http://www.opera.com/opera5/specs.html

angeschaut. Eigentlich laecherlich, nicht nur der poor Info wegen, sondern auch, weil der Opera doch kein createElement() beherrrscht. Damit ist eine Loesungsfindung wohl erstmal entgueltig vom Tisch.

Es war schon im Opera4 so schwachsinnig. Der kannte ein getElemntById() aber konnte damit nix anfangen !? Deshalb bin ich als einer der ersten auf die Idee gekommen auf:

if (window.document.documentElement)

abzufragen und nicht auf:

if (window.document.getElementById())

Jetzt habe wir den gleichen Salat am Hut. Opera kennt das all-Object, aber zu dem all-Object kennt er nicht die non plus ultra Methode innerHTML. Da kann man doch nur den Kopf schuetteln.

Aber auch ueber createElement ware es brutal. Wenn ich in meine Division nun nicht eine 1-zellige Tabelle reinschreiben moechte, sondern vielleicht eine 2-spaltige/2-zeilige Tabelle, so kann ich den JS-Code nicht verallgemeinert. Ist doch klaro…

Ich muesste notgedrungen erst in Core-JS einen Parser schreiben, der dann widerum die Reference-JS-Methoden wie createElement, setAttribute, appendChild usw. aufruft. Da kann ich ja gleich meinen eigenen Browser coden…

Ich finde, dieser Mangel macht den Opera tot bevor er zum Leben erweckt. DOM-Support…, das ist doch ne Luege.

Also man kann es drehen und wenden wie man will:

Einer luegt immer…
Einer wartet immer…dass einer mal die Wahrheit sagt…

CU

Anonym · 18. Dezember 2000 um 10:16

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

Anonym · 18. Dezember 2000 um 13:01

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

Anonym · 18. Dezember 2000 um 13:09

YO MÄN
also du scheinst da tief drinnen zu sein in dem thema. was hällst du von k-meleon? gibts den schon. hmm netscape-fan bin ich auch nicht, nicht dass ich gates so gerne mag, aber explorer zieht sein ding durch und das meiste funktioniert wenn man sich dran hält. ich versteh nicht, wie so eine firma wie netEscape überleben kann, sorry, ich mag keine glaubenskriege. aber die „optimierung“ für nn.4.x dauert immer zusätlich fast solange wie die etnwicklung einer site für den ie.

hover effekt für blockelemente? crazy…wozu soll das gu sein das ich ein break oder so sachen hovere?

Anonym · 18. Dezember 2000 um 13:36

Hallo,

k-meleon kenne ich noch nicht. Wo kann ich das finden?

Das ist ja genau das was ich meine. Eine Library entwickeln bedeutet erstmal sehr viel Arbeit, aber wenn die steht, dann kann ich Scripte fuer HTML-Dateien schreiben ohne jegliche Fallunterscheidung fuer die Browser (die wird ja in der Lib gemacht). Will damit sagen, dass ich das Script dann einfach so niederschreibe als wenn ale Browser nur eine Sprache kennen. Das ist cool, schnell und effizient.

Wenn man ein DHTML-Problem nicht fuer alle 4 oder 5 Browser unter einen Hut bringen kann, dann kannn man es auch nicht in einer Library und man muss auf dieses Feature verzichten oder es anders loesen.

BYE

Anonym · 18. Dezember 2000 um 13:42

http://www.ideenreich.com/k-meleon.shtml

hast du links zum einstieg in das thema libraries, ich kann html, javascript recht gut, ein wenig php, aber immer unter dem gesichtspunkt cross-browser strategien per abrfrage. von libraries etc. hab ich ehrlich gesagt keine ahnung…das wäre echt nett.

cu

Anonym · 18. Dezember 2000 um 20:32

Hallo,

vielen Dank fuer den Link-Tip.

Bzgl. Cross-Browser Tooltips habe ich mal overlib gefunden unter:

http://www.bosrup.com/web/overlib/

Die dhtmllib gab es mal bei Brainjar:

http://www.brainjar.com/

Sehr stark ist meiner Meinung nach die dynAPI von DanSteinMan:

http://www.dansteinman.com/

Grundaetzlich aendert sich nicht viel an der Vorgehensweise bzgl. der CrossBrowser-Abfragen, wenn man eine Library schreibt. Es ist halt eine js-Datei, z.B. dhtmllib.js die sehr allgemein geschrieben wird und keine Belange einer speziellen HTML-Seite beruecksichtig. Wenn auf irgendeiner Seite dann JavaScript benoetigt wird, so muss man sie dann per script-Tag einbinden damit man dessen Methoden aufrufen kann. Also so z.B. im Header:

Du kannst ja beliebig viele Scripte extern auf die obere Art einer HTML hinzugeben. Ich habe z.B. einen eigenen LibManager der eine Liste von Methoden hat und ca. so aussieht:

var oDHtmlMgr = null;

function cDHtmlMgr()
{
this.meIsNS4 = false;
this.meIsNS6 = false;
this.meIsIE4 = false;
this.meIsIE5 = false;
this.meIsOP5 = false;

this.detectBrowser = detectBrowser;

this.getLayerById = getLayerById;
this.findNS4LyrByName = findNS4LyrByName;

this.setLayerVisibility = setLayerVisibility;

this.setHtmlStrToLayer = setHtmlStrToLayer;
this.setPlainStrToLayer = setPlainStrToLayer;

this.getLayerWidth = getLayerWidth;
this.getLayerHeight = getLayerHeight;

this.setLayerWidth = setLayerWidth;
this.setLayerHeight = setLayerHeight;

this.setLayerBgColor = setLayerBgColor;
this.getLayerBgColor = getLayerBgColor;

this.setLayerZindex = setLayerZindex;
this.getLayerZindex = getLayerZindex;

this.getBrowserViewWidth = getBrowserViewWidth;
this.getBrowserViewHeight = getBrowserViewHeight;

this.getMouseViewXpos = getMouseViewXpos;
this.getMouseViewYpos = getMouseViewYpos;

this.getMousePageXpos = getMousePageXpos;
this.getMousePageYpos = getMousePageYpos;

this.getScrollBarLeftPx = getScrollBarLeftPx;
this.getScrollBarTopPx = getScrollBarTopPx;

this.setLayerPageEdgePos = setLayerPageEdgePos;
this.setLayerPageEdgeLeft = setLayerPageEdgeLeft;
this.setLayerPageEdgeTop = setLayerPageEdgeTop;

this.setLayerPageCenterPos = setLayerPageCenterPos;
this.setLayerPageCenterLeft = setLayerPageCenterLeft;
this.setLayerPageCenterTop = setLayerPageCenterTop;

this.setLayerViewEdgePos = setLayerViewEdgePos;
this.setLayerViewEdgeLeft = setLayerViewEdgeLeft;
this.setLayerViewEdgeTop = setLayerViewEdgeTop;

this.setLayerViewCenterPos = setLayerViewCenterPos;
this.setLayerViewCenterLeft = setLayerViewCenterLeft;
this.setLayerViewCenterTop = setLayerViewCenterTop;

this.getLayerPageEdgeLeft = getLayerPageEdgeLeft;
this.getLayerPageEdgeTop = getLayerPageEdgeTop;

this.getLayerViewEdgeLeft = getLayerViewEdgeLeft;
this.getLayerViewEdgeTop = getLayerViewEdgeTop;

this.getLayerViewEdgeRight = getLayerViewEdgeRight;
this.getLayerViewEdgeBottom = getLayerViewEdgeBottom;
}

oDHtmlMgr = new cDHtmlMgr();

Wenn ich z.B. in einer HTML-Datei eine Division zentriert an einen Punkt X,Y relative zum View (also nicht absolute zur Page)setzten moechte (also nicht die Eckposition des Layers left/top, sondern den bzgl. des Flaechenmittelspunktes), dann rufe ich
meinen Manager ueber die entsprechende Methode auf. Z.B. so:

oDHtmlMgr.setLayerViewCenterPos(layerRef,Xpos,Ypos)

Die Methode berechnet (Browser-abhaengig natuerlich) als erstes die ScrollWerte, denn der Layer soll ja realtiv zum View und nicht absolute zur Page mit Bezugspunkt (0,0) gesetzt werden. Das geht beim IE4/5 ueber:

scrollLeft und scrollTop

Beim Opera, NS4/6 ueber:

pageXOffset,pageYOffset

Da die Methode das Zentrum des Layers erwartet, brauche ich als naechstes die Breite und Hoehe des Layers:

NS4: layerRef.document.width, layerRef.document.height
IE4/5: layerRef.clientWidth, layerRef.clientHeight
NS6: layerRef.offsetWidth, layerRef.offsetHeight

So wird dann von der LayerBreite die Haelfte genommen, dieser von Xpos abgezogen der der ScrollWert hinzu addiert. So erhaelt der manager die absolute left-Position des Layers. Wenn das ueber die Buehne gegangen ist, dann ruft die Methode setLayerPageEdgePos() auf, die darauf hin optimiert ist widerum Browserabhaengig den Layer zu setzten:

NS4: pageX, pageY
IE: pixelLeft,pixelTop
NS6: left, top

Wie Du siehst brauche ich nun einmal eine geschriebene Methode aufrufen und schon macht der Manger das was ich will und ich brauche nicht bei jedem weiteren Problem erneut mir Gedanken machen wie ich das Browserabhaengig beruecksichtige und ausrechne.

Will damir sagen, ich schreibe fuer eine HTML-Datei ein Script in dem ich mich bzgl. Browserabhaengigkeit einen Dreck schere, denn ich weiss ja, mein Manager wird das schon managen. Ich verlagere also jegliche Browserabfragen und so in die externe Libray.

BYE

Anonym · 19. Dezember 2000 um 09:44

du bist echt crazy fella