Perché IE fornisce errori imprevisti durante l'impostazione di innerHTML

Question

Ho provato a impostare innerHTML su un elemento in Firefox e ha funzionato bene, l'ho provato in IE e ho riscontrato errori imprevisti senza una ragione ovvia.

Ad esempio se provi a impostare innerHTML di una tabella su " ciao da stu " fallirà, perché la tabella deve essere seguita da una sequenza.

Answer 1

" Apparentemente Firefox non è così esigente " == > Apparentemente FireFox è così pieno di bug, che non registra questa ovvia violazione delle regole di base di nidificazione html ...

Come qualcuno ha sottolineato in un altro forum, FireFox accetterà di aggiungere un intero documento html come figlio di un campo modulo o addirittura di un'immagine, - (

Answer 2

Stai riscontrando quel comportamento perché innerHTML è di sola lettura per gli elementi di tabella in IE. Dalla documentazione proprietà innerHTML :

  

La proprietà è in lettura / scrittura per tutti gli oggetti tranne i seguenti, per i quali è di sola lettura: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

Answer 3

Non so perché stai venendo modificato per la domanda Stu, dato che questo è qualcosa che ho risolto abbastanza di recente. Il trucco è "spruzzare" l'HTML in un elemento DOM che non è attualmente collegato all'albero del documento . Ecco lo snippet di codice che lo fa:

// 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...

Nota che stiamo usando solo jQuery in questo frammento qui per verificare se il browser è IE, non c'è una forte dipendenza da jQuery.

Answer 4

controlla l'ambito dell'elemento che stai cercando di impostare innerHTML. poiché FF e IE lo gestiscono in modo diverso

Answer 5

http://www.ericvasilik.com/2006/07/code -karma.html

Answer 6

Ho lottato con il problema di sostituire un elenco di collegamenti in una tabella con un diverso elenco di collegamenti. Come sopra, il problema si presenta con IE e la sua proprietà di sola lettura degli elementi della tabella.

Aggiungere per me non era un'opzione quindi ho (finalmente) risolto questo (che funziona per Ch, FF e IE 8.0 (ancora per provare gli altri - ma sono fiducioso)).

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

Funziona per me - spero che funzioni per te

Answer 7

Hai provato a impostare innerText e / o textContent? Alcuni nodi (come i tag SCRIPT) non si comporteranno come previsto quando si tenta di modificare il loro HTML interno in IE. Maggiori informazioni su innerText contro textContent:

http://blog.coderlab.us/2006/04/18 / il-TextContent-e-InnerText-properties /

Answer 8

Stai impostando un innerHTML completamente diverso o stai sostituendo un modello in innerHTML? Chiedo perché se stai cercando di eseguire una ricerca / sostituzione banale tramite il 'potere' di innerHTML, troverai alcuni tipi di elementi che non giocano in IE.

Questo può essere risolto con cautela circondando il tuo tentativo in un tentativo / cattura e facendo il bubbing del DOM tramite parentNode fino a quando riesci a farlo correttamente.

Ma questo non sarà adatto se stai inserendo nuovi contenuti.

Answer 9

È possibile modificare il comportamento. Ecco un codice che impedisce la garbage collection di elementi altrimenti referenziati in IE:

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/

Answer 10

Ho appena capito che se si tenta di impostare innerHTML su un elemento in IE che non è logicamente corretto, verrà generato questo errore. Ad esempio, se provi a impostare innerHTML di una tabella su " ciao da stu " fallirà, perché la tabella deve essere seguita da una sequenza. Apparentemente Firefox non è così esigente. Spero che sia d'aiuto.