Fehler beim Setzen von style-Eigenschaften (Leerzeichen)
Fibs
- javascript
Ich schreibe momentan an einer Seite, die neben den normalen Inhalten auch die Möglichkeit bietet, dass Benutzer eigene HTML/PHP-wasauchimmer-Seiten hochladen können, diese aber "in" der Seite (also mit Navigationsleiste, Statistiken und Benutzerdaten von mir) dargestellt werden. Jetzt wollte ich dem ganzen gewisse Sicherheitsoptionen geben. Die höchste Stufe ist ein einfaches Include - das Problem dabei ist, dass auf diese Weise der Benutzer ja in den Hauptdateien der Seite herumpfuschen könnte. Auch eine möglichkeit ist mit fopen auf die externe Adresse die Datei zuerst selbst abzurufen und dann mit echo auszugeben, aber das erscheint mir relativ ineffizient. Also hab ichs mit Object und Iframe versucht, bin aber daran gescheitert, dass ich die Größen von denen nicht an den Inhalt anpassen konnte. Gut, also nehme ich jetzt das XMLHttp-Objekt und rufe die Seite nach dem Laden der Navigation ab und füge sie als innerHTML in den Content-Bereich ein. Aus irgendeinem Grund wird aber eventuell darin enthaltener JavaScript-Code nicht ausgeführt. Also zerlege ich jetzt mit einem kleinen Javascript die empfangenen Daten, füge die Elemente einzeln hinzu und setze ihre Eigenschaften über Javascript - so kann ich den Code herausfiltern und mit eval() ausführen. Da gibts leider einen neuen Fehler: ich kann mit "setAttribute" die "style"-Eigenschaft nicht setzen (z.b. auf "margin:10px;float:left"). Also zerlege ich nun auch die Style-Eigenschaften und weise sie einzeln zu.
Und jetzt das Problem: Die so zugewiesenen Style-Eigenschaften haben immer ein Leerzeichen vorne (erst im DOM, wenn ichs mir mit der Developer-Toolbar für den IE anschaue, wenn ich es mir vorher mit alert() ausgeben lasse, ist das Leerzeichen nicht da). In anderen Teilen der Seite funktioniert dieselbe Aktion ohne Probleme.
Hier der Code (wird für jedes Element einzeln ausgeführt):
//Was vorher Geschah: HTML wurde zerlegt, die folgenden Variablen gesetzt:
// elemstr : HTML-Tag des Elements (z.B. "div")
// args : Array aller Eigenschaften des Elements
// argob : Objekt (Für assoziatives Array, indiziert über die Elemente von args) mit den Werten der Eigenschaften des Elements
// gs_Trim() : Funktion, die Leerzeichen am Anfang und am Ende eines Strings entfernt.
var telem=document.createElement(elemstr);
for(i=0;i<args.length;i++)
{
try
{
if(args[i]=="style")
{
var styleargs=argob[args[i]].split(";");
for(var j=0;j<styleargs.length;j++)
{
var tstylearr=styleargs[j].split(":");
//telem.style[gs_Trim(tstylearr[0])]=gs_Trim(tstylearr[1]); <= Bereits versucht, ebenso "style.setAttribute(...)"
while(tstylearr[0].indexOf("-")>0)
{
//Umwandlung der CSS-Bezeichnungen in die JS-Bezeichnungen, z.B. "margin-left" in "marginLeft"
var tdpos=tstylearr[0].indexOf("-");
tstylearr[0]=tstylearr[0].substr(0,tdpos)+tstylearr[0].substr(tdpos+1,1).toUpperCase()+tstylearr[0].substr(tdpos+2);
}
if(tstylearr[0]=="float")
{
//"Sonderfall" float
tstylearr[0]="cssFloat";
}
//Gibt z.B.: 'telem.style.cssFloat="left"4' zurück
alert("telem.style."+tstylearr[0]+'="'+gs_Trim(tstylearr[1])+'"'+tstylearr[1].length);
//Wert für cssFloat im IE ist dann aber " left"
eval("telem.style."+tstylearr[0]+'="'+gs_Trim(tstylearr[1])+'"');
}
}
else
{
telem.setAttribute(args[i],argob[args[i]],0);
}
}
catch(e)
{
alert('Fehler bei Attributzuweisung: Arribut "'+args[i]+'" konnte für Element "'+elemstr+'" nicht auf "'+argob[args[i]]+'" gesetzt werden. Fehler: '+e+"("+String(i)+")");
}
}
Hi,
Und jetzt das Problem: Die so zugewiesenen Style-Eigenschaften haben immer ein Leerzeichen vorne (erst im DOM, wenn ichs mir mit der Developer-Toolbar für den IE anschaue, wenn ich es mir vorher mit alert() ausgeben lasse, ist das Leerzeichen nicht da).
ja, der IE und seine Toolbar arbeiten so. Warum sollte das ein Problem sein?
Cheatah
Hi,
Und jetzt das Problem: Die so zugewiesenen Style-Eigenschaften haben immer ein Leerzeichen vorne (erst im DOM, wenn ichs mir mit der Developer-Toolbar für den IE anschaue, wenn ich es mir vorher mit alert() ausgeben lasse, ist das Leerzeichen nicht da).
ja, der IE und seine Toolbar arbeiten so. Warum sollte das ein Problem sein?
Cheatah
Das Problem ist, dass in diesem Fall "float" auf " left" gesetzt wird und daher anscheinend ungültig ist. Sobald ich das leerzeichen in der Toolbar wegeditiere, wird die Seite korrekt angezeigt. Das kann ich aber von den Benutzern kaum verlangen...
Hi,
Das Problem ist, dass in diesem Fall "float" auf " left" gesetzt wird und daher anscheinend ungültig ist.
falsche Schlussfolgerung. Der IE erlaubt kein Setzen einer "float"-Eigenschaft, weil dies in JavaScript ein Schlüsselwort ist. Die "richtige" Eigenschaft lautet "styleFloat".
Cheatah
Hi,
Das Problem ist, dass in diesem Fall "float" auf " left" gesetzt wird und daher anscheinend ungültig ist.
falsche Schlussfolgerung. Der IE erlaubt kein Setzen einer "float"-Eigenschaft, weil dies in JavaScript ein Schlüsselwort ist. Die "richtige" Eigenschaft lautet "styleFloat".
Cheatah
Vielen Dank, hat gleich funktioniert. Ich hab eigentlich eh nicht "float", sondern "cssFloat" (wie in http://de.selfhtml.org/javascript/objekte/style.htm in der Tabelle angegeben) gesetzt, wie im Code oben steht (nur gab der IE in der Toolbar dann "float (css)" an). Das hab ich jetzt durch "styleFloat" ersetzt.
Nochmal vielen Dank für die schnelle Hilfe.