Pourquoi IE génère-t-il des erreurs inattendues lors de la définition de innerHTML?

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

Question

J'ai essayé de définir innerHTML sur un élément de Firefox et tout fonctionnait correctement. Je l'ai essayé dans IE et j'ai eu des erreurs inattendues sans raison évidente.

Par exemple, si vous essayez de définir le code innerHTML d'une table sur " salut de stu " cela échouera car la table doit être suivie d'une séquence.

Était-ce utile?

La solution

"Apparemment, firefox n'est pas si difficile" == > Apparemment, FireFox est si bogué qu’il n'enregistre pas cette violation évidente des règles de base pour l’imbrication HTML ...

Comme quelqu'un l’a souligné dans un autre forum, FireFox acceptera que vous ajoutiez un document HTML complet en tant qu’enfant d’un champ de formulaire ou même d’une image, - (

Autres conseils

Vous constatez ce comportement car innerHTML est en lecture seule pour les éléments de table dans IE. De la propriété innerHTML de MSDN:

  

La propriété est en lecture / écriture pour tous les objets sauf les suivants, pour lesquels elle est en lecture seule: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

Je ne sais pas pourquoi vous êtes déçu pour la question Stu, car c’est quelque chose que j’ai résolu assez récemment. L'astuce consiste à "injecter" le code HTML dans un élément DOM qui n'est pas actuellement lié à l'arborescence du document . Voici l'extrait de code qui le fait: 

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

Notez que nous utilisons uniquement jQuery dans cet extrait de code pour vérifier si le navigateur est un navigateur IE, il n'y a pas de dépendance dure à jQuery.

Vérifiez la portée de l'élément pour lequel vous essayez de définir innerHTML. puisque FF et IE traitent cela d'une manière différente

Je me débattais avec le problème du remplacement d’une liste de liens dans un tableau par une liste de liens différente. Comme ci-dessus, le problème vient d’IE et de sa propriété readonly d’éléments de tableau.

Pour moi, ajouter n’était pas une option, j’ai donc enfin (finalement) mis au point cette solution (qui fonctionne pour Ch, FF et IE 8.0 (pour l’essayer, mais je suis optimiste)). 

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

Fonctionne pour moi - j'espère que cela fonctionnera pour vous

Avez-vous essayé de définir innerText et / ou textContent? Certains nœuds (tels que les balises SCRIPT) ne se comportent pas comme prévu lorsque vous essayez de modifier leur innerHTML dans IE. Plus d'informations ici sur innerText et textContent:

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

Définissez-vous un innerHTML complètement différent ou remplacez-vous un motif dans le innerHTML? Je demande parce que si vous essayez de faire une recherche / un remplacement trivial via le "pouvoir" de innerHTML, vous trouverez certains types d'éléments ne jouant pas dans IE.

Vous pouvez y remédier avec précaution en entourant votre tentative d'essayage / capture et en diffusant le DOM par le biais de parentNode jusqu'à ce que vous y parveniez.

Mais cela ne conviendra pas si vous insérez un nouveau contenu.

Vous pouvez modifier le comportement. Voici un code qui empêche la récupération de place d’éléments référencés dans 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/

Je viens de comprendre que si vous essayez de définir innerHTML sur un élément d'IE qui n'est pas logiquement correct, cette erreur sera générée. Par exemple, si vous essayez de définir le code innerHTML d'une table sur " hi from stu " cela échouera car la table doit être suivie d'une séquence. Apparemment, firefox n'est pas si difficile. J'espère que ça aide.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top