Symptom: Beim Festlegen eines Wertes für die innere HTML eines Elements, wenn der bereitgestellte HTML -Code JS -Skripte enthält, sind diese Skripte oft ungültig oder für einen Browser gültig, jedoch nicht für andere Browser.
Ursache: Verschiedene Browser haben unterschiedliche Möglichkeiten, Skripte zu bearbeiten, die in Innerhtml eingefügt wurden. Nach dem Training wird es wie folgt zusammengefasst:
Zum IE muss das Skript -Tag zuerst ein Aufschubattribut haben, und zweitens zum Zeitpunkt der Einführung den Knoten, zu dem innerhtml im Dombaum sein muss.
Für Firefox und Opera darf der Knoten, zu dem Innerhtml nicht im Dombaum im Moment der Einfügung sein darf.
Nach der obigen Schlussfolgerung wird eine allgemeine Methode zur Festlegung von Innerhtml angegeben:
Die Codekopie lautet wie folgt:
/*
* Beschreibung: Cross-Browser-Setup Innerhtml-Methode
* Ermöglicht das Einsetzen des HTML -Code
* Parameter:
* EL: Der Knoten im DOM -Baum setzen seine innere Haltung
* HTMLCode: HTML -Code eingefügt
* Getestete Browser: IE5+, Firefox1.5+, Opera8.5+
*/
var set_innerhtml = Funktion (EL, HTMLCODE)
{var ua = navigator.useragent.tolowerCase ();
if (ua.indexof ('msie')> = 0 && ua.indexof ('Opera') <0)
{htmlcode = '<div style = "display: keine"> für IE </div>' + htmlCode;
htmlcode = htmlcode.replace (/<script ([^>]*)>/gi, '<script $ 1 defer = "true">');
El.Innerhtml = htmlCode;
El.Removechild (El.Firstchild);
}
anders
{var el_next = el.Nextsibling;
var el_parent = el.parentnode;
el_parent.removechild (el);
El.Innerhtml = htmlCode;
if (el_next)
el_parent.insertbefore (el, el_next)
anders
el_parent.appendchild (el);
}
}
Es gibt ein weiteres Problem mit dem obigen Code: Wenn der eingefügte HTML -Code ein Dokument enthält. Für diesen Fall kann es durch Neudefinition von Dokument.Write vermieden werden. Der Code ist wie folgt:
Die Codekopie lautet wie folgt:
/*
Beschreibung: Definieren Sie das Dokument.Write -Funktion neu.
Vermeiden Sie die Verwendung von SET_INNERHTML, das Einfügen von HTML -Code enthält Dokument.Write -Anweisungen, wodurch die Originalseite beschädigt wird.
*/
document.write = function () {
var body = document.getElementsByTagName ('body') [0];
für (var i = 0; i <argumente.length; i ++) {
Argument = Argumente [i];
if (typeof argument == 'String') {
var el = body.AppendChild (document.createelement ('div'));
SET_INNERHTML (EL, Argument)
}
}
}