Warum gibt der IE unerwartete Fehler beim Einstellen von Innerhtml

StackOverflow https://stackoverflow.com/questions/155426

Frage

Ich habe versucht, Innerhtml auf ein Element in Firefox zu setzen, und es funktionierte gut, versuchte es im IE und bekam unerwartete Fehler ohne offensichtlichen Grund dafür.

Wenn Sie beispielsweise versuchen, die Innerhtml einer Tabelle auf "Hi From Stu" festzulegen, wird sie fehlschlagen, da die Tabelle von einer Sequenz folgen muss.

War es hilfreich?

Lösung

"Anscheinend ist Firefox nicht so wählerisch" ==> Anscheinend ist Firefox so fehlerhaft, dass es diesen offensichtlichen Verstoß gegen grundlegende HTML-Nisting-Regeln nicht registriert ...

Wie jemand in einem anderen Forum betonte, wird Firefox ein ganzes HTML-Dokument als Kind eines Formfelds oder sogar als Bild anhängen,-(

Andere Tipps

Sie sehen dieses Verhalten, weil Innerhtml nur schreibgeschützt für Tabellenelemente im IE ist. Von msdn's Innerhtml -Eigenschaft Dokumentation:

Die Eigenschaft wird für alle Objekte außer dem folgenden gelesen/schreiben, für das sie schreibgeschützt ist: Col, Colgroup, Frameset, Head, HTML, Stil, Tisch, Tbody, Tfoot, Thead, Titel, Tr.

Ich weiß nicht, warum Sie für die Frage stu herabgesetzt werden, da dies etwas ist, das ich vor kurzem gelöst habe. Der Trick besteht darin, das HTML in ein DOM -Element zu „spritzen“, das ist derzeit nicht am Dokumentbaum angebracht. Hier ist der Code -Snippet, der es tut:

// removing the scripts to avoid any 'Permission Denied' errors in IE
var cleaned = html.replace(/<script(.|\s)*?\/script>/g, "");

// IE is stricter on malformed HTML injecting direct into DOM. By injecting into 
// an element that's not yet part of DOM it's more lenient and will clean it up.
if (jQuery.browser.msie)
{
    var tempElement = document.createElement("DIV");
    tempElement.innerHTML = cleaned;
    cleaned = tempElement.innerHTML;
    tempElement = null;
}
// now 'cleaned' is ready to use...

Beachten Sie, dass wir hier nur JQuery verwenden, um zu testen, ob der Browser dh ist. Es gibt keine harte Abhängigkeit von JQuery.

Überprüfen Sie den Umfang des Elements, das Sie versuchen, die Innerhtml festzulegen. da ff und dh das auf andere Weise umgehen

Ich habe mit dem Problem gekämpft, eine Liste von Links in einer Tabelle mit einer anderen Liste von Links zu ersetzen. Wie oben ist das Problem mit dem IE und seiner Readonly -Eigenschaft von Tabellenelementen verbunden.

Append für mich war keine Option, also habe ich (endlich) dies ausgearbeitet (was für CH, FF und IE 8.0 funktioniert (noch andere probiert - aber ich bin hoffnungsvoll).

replaceInReadOnly(document.getElementById("links"), "<a href>........etc</a>");

function replaceInReadOnly(element, content){
    var newNode = document.createElement();
    newNode.innerHTML = content;
    var oldNode = element.firstChild;
    var output = element.replaceChild(newNode, oldNode);
}

Funktioniert für mich - ich hoffe es funktioniert für Sie

Haben Sie versucht, InnerText und/oder TextContent festzulegen? Einige Knoten (wie Skript -Tags) verhalten sich nicht wie erwartet, wenn Sie versuchen, ihre Innerhtml im IE zu ändern. Mehr hier über InnerText versus textContent:

http://blog.coderlab.us/2006/04/18/the-textcontent-inntext-properties/

Stellen Sie eine völlig andere Innerhtml ein oder ersetzen Sie ein Muster in der Innerhtml? Ich frage, denn wenn Sie versuchen, eine triviale Suche/Ersetzung über die 'Power' von Innerhtml durchzuführen, werden Sie einige Arten von Elementen finden, die nicht in IE spielen.

Dies kann vorsichtig behoben werden, indem Sie Ihren Versuch in einem Versuch umgeben/fangen und das DOM über ParentNode aufsprudeln, bis Sie es erfolgreich geschafft haben.

Dies ist jedoch nicht geeignet, wenn Sie brandneue Inhalte einfügen.

Sie können das Verhalten ändern. Hier ist ein Code, der die Müllsammlung von ansonsten referenzierten Elementen im IE verhindert:

if (/(msie|trident)/i.test(navigator.userAgent)) {
 var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
 var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
 Object.defineProperty(HTMLElement.prototype, "innerHTML", {
  get: function () {return innerhtml_get.call (this)},
  set: function(new_html) {
   var childNodes = this.childNodes
   for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
    this.removeChild (childNodes[0])
   }
   innerhtml_set.call (this, new_html)
  }
 })
}

var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)

document.body.innerHTML = ""
console.log (mydiv.innerHTML)

http://jsfiddle.net/dllbc/9/

Ich habe gerade herausgefunden, dass wenn Sie versuchen, Innerhtml auf ein Element in IE zu setzen, das logisch nicht korrekt ist, diesen Fehler wirft. Zum Beispiel, wenn Sie versuchen, die Innerhtml einer Tabelle auf "festzulegen" Hallo aus Stu "Es wird scheitern, weil die Tabelle von einer Sequenz folgen muss. Anscheinend ist Firefox nicht so wählerisch. Ich hoffe, sie hilft.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top