Was hält mehrere Softwareentwickler zwei Tage auf Trab? Richtig, der Internet Explorer, oder kurz "IE". In unserem Fall IE8.
Um anderen Entwicklern das Leben zu erleichtern, habe ich mich entschieden, die Problematik hier nochmal darzulegen und, vor allem, eine Lösung zu präsentieren. Es gibt im Web hunderte Pages die sich mit dem Problem befassen, aber ich habe nach langem Suchen nur eine einzige gefunden, die den Grund nannte, der in unserem Fall zum Erscheinen dieses lästigen Dialogs führte.
Die übliche Grund ist eine "http://" Referenz auf irgendein Bild oder anderes eingebettetes Element innerhalb einer Seite, welche per "https://" angezeigt wird. Dies ist einfach zu beheben: man suche nach "http" und ersetze durch "https". So weit so gut.
Aber es gibt noch einen weiteren Fall: im IE bis einschließlich Version 7 gibt es einen Bug, der dazu führt, dass der Dialog angezeigt wird, wenn man die JScript Methode "removeChild" nutzt. Als Beispiel diene uns dieses Element:
<div id="myDiv">
<input id="myInput" type="text" style="background:url(/images/myimage.png)"/>
</div>
Versucht man dieses Eingabefeld nun zu entfernen per Script, erhält man obige Meldung:
document.getElementById("myDiv").parentNode.removeChild(document.getElementById("myImage"));
Warum? Der Grund ist das Hintergrundbild des Textfeldes. Sobald ein Element einen Hintergrund definiert, führt die Nutzung von "removeChild" zu dem Bug.
Auch das ist weitestgehend bekannt.
Weniger bekannt ist hingegen: es gibt das Problem auch noch in IE8 in anderer Form.
Die genaue Definition lautet: Das Einfügen eines Elementes mit relativer Hintergrundgrafik im inline Style in die DOM führt zur Anzeige des obigen Dialoges.
Wenn man per XmlHttpRequest Daten vom Server lädt und die Antwort ausliest (ResponseText) und diese als HTML interpretiert und in der aktuellen Seite per Script einfügt, macht man genau dies und bekommt Dialog zu sehen. Es ist also ein gängiges Problem im Web 2.0.
In ResponseText sei:
<input id="myInput" type="text" style="background:url(/images/myimage.png)"/>
Hier soll das Ergebnis von ResponseText hinein:
<div id="myTarget">
</div>
In der "Request Complete" Methode das XmlHttpRequest Objektes:
document.getElementById("myTarget").innerHTML = oXml.ResponseText;
Und voilà. Schon kommt das wunderbare Popup. Microsoft
Lösungen:
- Alle Bilder Referenzen absolut angeben
- Keine inline Styles verwenden, sondern CSS Dateien nutzen
Links:
Ich hoffe dem einen oder anderen geholfen zu haben.