IE11 innerHTML : comportement étrange

Question

J'ai un comportement très étrange avec element.innerHTML dans IE11.

Comme vous pouvez le voir ici : http://pe281.s3.amazonaws.com/index.html , certains riotjs ne sont pas évaluées.

J'ai trouvé deux causes :
- le signe de l'euro au-dessus. Il est codé comme suit € mais j'ai le même comportement avec \u20AC o € . Cela se produit avec tous les caractères de la gamme des symboles monétaires, et quelques autres gammes. La suppression ou l'utilisation d'un caractère standard ne provoque pas le problème.
- La manière riotjs crée une balise et un modèle personnalisés. En gros, cela fait ceci :

var html = "{reward.amount.toLocaleString()}<span>&#8364;</span>{moment(expiracyDate).format('DD/MM/YYYY')}";
var e = document.createElement('div');
e.innerHTML = html;

Dans le résultat e nœud, e.childNodes renvoie le tableau suivant :

[0]: {reward.amount.toLocaleString()}
[1]: <span>€</span>
[2]: {
[3]: moment(expiracyDate).format('DD/MM/YYYY')}

Il est évident que les nœuds 2 et 3 devraient être uniques. S'ils sont séparés, riot ne reconnaît pas d'expression à évaluer, d'où le problème.

Mais il y a plus : Le problème n'est pas constant, et ne peut par exemple pas être reproduit sur un violon : https://jsfiddle.net/5wg3zxk5/4/ où la chaîne html est correctement analysée.

Ma question est donc la suivante : comment certains caractères spécifiques peuvent-ils modifier la façon dont element.innerHTML analyse son entrée ? Comment résoudre ce problème ?

Answer 1

.childNodes est un tableau généré ( enfin NodeList..) qui est rempli de ELEMENT_NODE mais peut aussi être rempli de : ATTRIBUTE_NODE , TEXT_NODE , CDATA_SECTION_NODE , ENTITY_REFERENCE_NODE , ENTITY_NODE , PROCESSING_INSTRUCTION_NODE , COMMENT_NODE , DOCUMENT_NODE , DOCUMENT_TYPE_NODE , DOCUMENT_FRAGMENT_NODE , NOTATION_NODE , ...

Vous voulez probablement uniquement les nœuds du type : ELEMENT_NODE (div et autres..) et peut-être aussi TEXT_NODE .

utiliser une simple boucle pour ne garder que les noeuds avec .nodeType === Element.ELEMENT_NODE (ou simplement le comparer à son enum qui est 1 )

vous pouvez également utiliser l'alternative beaucoup plus simple de .children

Answer 2

Sustituir <br> avec <br /> (ce sont des étiquettes à fermeture automatique). IE essaie de fermer les balises pour vous. C'est pourquoi vous avez doublé br tags

Answer 3

Je pense que ça devrait être quelque chose comme ça :

var html = {reward.amount.toLocaleString()}  + "&euro;<br>" +{moment(expiracyDate).format('DD/MM/YYYY')} + " <br>";
var e = document.createElement('div');
e.innerHTML = html;

Les éléments que j'ai supprimés des guillemets semblent être des variables ou d'autres éléments, et non des chaînes de caractères, qui ne devraient donc pas être entre guillemets.