Exception DOM de caractère non valide dans IE9

Question

La pièce suivante de JS qui fonctionnait auparavant dans IE8 échoue maintenant dans IE9.

 document.createElement('<iframe id="yui-history-iframe" src="../../images/defaults/transparent-pixel.gif" style="position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;"></iframe>');
 

J'obtiens l'exception suivante: SCRIPT5022: Exception DOM: INVALID_CHARACTER_ERR (5)

Le code ci-dessus n'est-il pas conforme aux normes? Quelle est la solution au problème?

Answer 1

L'API de createElement spécifie que le constructeur veut un string qui spécifie le nom d'un élément. Il semblerait qu'IE9 respecte plus strictement les normes. Vous pouvez accomplir la même chose que vous essayez de faire avec le code suivant:

 var iframe = document.createElement("iframe");
iframe.setAttribute("id", "yui-history-iframe");
iframe.setAttribute("src", "../../images/defaults/transparent-pixel.gif");
iframe.setAttribute("style", "position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;");
 

http://msdn.microsoft.com/en-us/library/ms536389(v=vs.85).aspx

Answer 2

Pour jQuery.bgiframe.js, serait une meilleure solution pour corriger le mauvais test IE6?

Qu'en est-il de remplacer ceci:

 if($.browser.msie&&/6.0/.test(navigator.userAgent)
 

avec quelque chose comme ça:

 if ($.browser.msie && $.browser.version=="6.0")
 

Answer 3

Pour jquery.bgiframe.js:

J'ai téléchargé la version 1.1.3 pré à

https://github.com/brandonaaron/bgiframe/blob/master/jquery.bgiframe.js

et cela a résolu le problème.

Answer 4

Cette erreur peut venir quand accidentellement à l'aide de JavaScript standard noms de fonction en tant que vos propres noms de fonction si vous n'avez pas utiliser des espaces de noms. Par exemple, j'ai un concept appelé "Attribut" et je voulais essayer une nouvelle fonction qui a créé une nouvelle l'un de ces:

<button onclick="createAttribute('Pony')">Foo</button>
<button onclick="createAttribute('Magical pony')">Bar</button>
<script type="text/javascript">
    function createAttribute(name) { alert(name); } 
</script>

• En cliquant sur "Foo" vous donne rien
• En cliquant sur Foo vous donne INVALID_CHARACTER_ERR (5) ou InvalidCharacterError: DOM Exception 5
• L'ouverture de votre dev console et en cours d'exécution createAttribute('Django') vous donne l'alerte

Ce qui se passe est que les boutons sont en appelant document.createAttribute() et votre dev console est l'appel de la fonction que vous avez déclaré.

Solution: utiliser un autre nom de la fonction ou, mieux encore, d'un espace de noms.

Answer 5

Si vous êtes prêt à sacrifier un peu de performance et peut utiliser une bibliothèque externe je conseille:

Prototype JS

var el = new Element('iframe', {
  id: "<your id here>",
  src: "<your source here>",
  style: "<your style here>"
});

jQuery

var el = jQuery('<iframe>', {
  id: '<your id here>',
  src: "<your source here>",
  style: "<your style here>"
})[0];

Cela prend soin de tous les incohérences entre les navigateurs et est aussi beaucoup plus jolie :-)

Remarque: Ce n'est pas testée pseudo - reportez-vous à la documentation officielle des pages de Prototype JS et jQuery pour plus d'informations.