innerHTML fügt dynamisch HTML-Code und Skripte hinzu, die mit mehreren Browsern und Javascript-Kenntnissen kompatibel sind

Symptom: Wenn beim Festlegen eines Werts für innerHTML eines Elements der bereitgestellte HTML-Code JS-Skripte enthält, sind diese Skripte oft ungültig, oder sie sind in einigen Browsern gültig, in anderen jedoch nicht.

Ursache: Verschiedene Browser haben unterschiedliche Möglichkeiten, in innerHTML eingefügte Skripte zu verarbeiten. Nach dem Üben lässt es sich wie folgt zusammenfassen:

Für IE muss erstens das Skript-Tag das Defer-Attribut haben und zweitens muss sich zum Zeitpunkt des Einfügens der Knoten, zu dem innerHTML gehört, im DOM-Baum befinden.

Bei Firefox und Opera darf sich der Knoten, zu dem innerHTML gehört, zum Zeitpunkt des Einfügens nicht im DOM-Baum befinden.

Basierend auf der obigen Schlussfolgerung ist die allgemeine Einstellung der innerHTML-Methode angegeben:

Code kopieren Der Code lautet wie folgt:

/*
* Beschreibung: Browserübergreifende Einstellung der innerHTML-Methode
* Eingefügten HTML-Code mit Skript und Stil zulassen
* Parameter:
* el: Knoten im DOM-Baum, legen Sie sein innerHTML fest
* htmlCode: HTML-Code
eingefügt *Getestete Browser: ie5, Firefox1.5, Opera8.5
*/
var set_innerHTML = function (el, htmlCode)
{var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0)
{htmlCode = '

für IE

' htmlCode;
htmlCode = htmlCode.replace(/]*)>/gi,'');
el.innerHTML = htmlCode;
el.removeChild(el.firstChild);
}
sonst
{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)
sonst
el_parent.appendChild(el);
}
}

Es gibt ein weiteres Problem mit dem obigen Code: Wenn der eingefügte HTML-Code eine document.write-Anweisung enthält, wird die gesamte Seite zerstört. Diese Situation kann durch eine Neudefinition von document.write vermieden werden. Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

/*
Beschreibung: Definieren Sie die document.write-Funktion neu.
Vermeiden Sie bei Verwendung von set_innerHTML, dass der eingefügte HTML-Code die document.write-Anweisung enthält, wodurch die Originalseite beschädigt wird.
*/
document.write = function(){
var body = document.getElementsByTagName('body')[0];
for (var i = 0; i < arguments.length; i ) {
argument = arguments[i];
if (typeof argument == 'string') {
var el = body.appendChild(document.createElement('div'));
set_innerHTML(el, argument)
}
}
}