web-dev-qa-db-fra.com

Exception DOM de caractère non valide dans IE9

Le morceau suivant de JS qui fonctionnait 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>');

Je reçois 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 pour le problème?

29
Pramanat

L'API pour createElement spécifie que le constructeur veut une string qui spécifie le nom d'un élément. Il semblerait que 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

29
Adam Ayres

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")
13
Marco

Pour jquery.bgiframe.js:

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

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

et cela a résolu le problème.

7
Tillito

Cette erreur peut survenir lorsque vous utilisez accidentellement des noms de fonction JavaScript standard comme noms de fonction si vous n'utilisez pas d'espaces de nom. Par exemple, j'ai un concept appelé "Attribut" et je voulais essayer une nouvelle fonction qui en crée une nouvelle:

<button onclick="createAttribute('Pony')">Foo</button>
<button onclick="createAttribute('Magical pony')">Bar</button>
<script type="text/javascript">
    function createAttribute(name) { alert(name); } 
</script>
  • "Foo" ne vous donne rien
  • Cliquer sur Foo vous donne INVALID_CHARACTER_ERR (5) ou InvalidCharacterError: DOM Exception 5
  • Ouvrir votre console dev et exécuter createAttribute('Django') vous alerte

En réalité, les boutons appellent document.createAttribute() et votre console de développement appelle la fonction que vous avez déclarée.

Solution: utilise un nom de fonction différent ou, mieux encore, un espace de noms.

0
Nenotlep

Si vous êtes prêt à sacrifier un peu de performance et que vous pouvez utiliser une bibliothèque externe, je vous suggère d'utiliser:

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 corrige toutes les incohérences entre les navigateurs et est beaucoup plus joli :-)

Remarque: il s'agit d'un pseudocode non testé - reportez-vous aux pages de documentation officielle de Prototype JS et jQuery pour plus d'informations.

0
Niko