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)+")");
}
}