Excepción DOM de caracteres no válidos en IE9

Question

La siguiente pieza de JS que solía funcionar en IE8 está fallando ahora en 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>'); 

tengo la siguiente excepción: SCRIPT5022: DOM Excepción: INVALID_CHARACTER_ERR (5)

Es la pieza de código anterior no conforme a las normas. ¿Cuál es la solución para el problema?

Answer 1

La API para createElement especifica que el constructor desea un string que especifique el nombre de un elemento. Parece que IE9 sigue más estrictamente los estándares. Se puede obtener el mismo resultado que estamos tratando de hacer con el siguiente código:

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

Ésta es una solución para jquery.bgiframe.js de jQuery.

if ($.browser.msie && /9.0/.test(navigator.userAgent)) { 
       var iframe = document.createElement("iframe"); 
       iframe.setAttribute("class", "bgiframe"); 
       iframe.setAttribute("frameborder", "0"); 
       iframe.setAttribute("style", "display:block;position:absolute;z-index:-1;filter:Alpha(Opacity=\'0\');top:expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\');left:expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\');width:expression(this.parentNode.offsetWidth+\'px\');height:expression(this.parentNode.offsetHeight+\'px\');"); 
       this.insertBefore(iframe, this.firstChild); 
      } else { 
       this.insertBefore(document.createElement(html), this.firstChild); 
      } 

Answer 3

Para jQuery.bgiframe.js, sería una mejor solución para arreglar la prueba IE6 mal?

¿Qué pasa con la sustitución de éste:

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

con algo como esto:

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

Answer 4

Para jquery.bgiframe.js:

he descargado la versión 1.1.3 en pre

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

y esto resolvió el problema.

Answer 5

Este error puede producirse al utilizar accidentalmente nombres de funciones de JavaScript estándar como sus propios nombres de funciones si no utiliza espacios de nombres. Por ejemplo, tengo un concepto llamado "Atributo" y quería probar una nueva función que crea un nuevo uno de esos:

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

• Al hacer clic en "Foo" le da nada
• Al hacer clic Foo le da INVALID_CHARACTER_ERR (5) o InvalidCharacterError: DOM Exception 5
• Abriendo la consola dev y ejecuta createAttribute('Django') le da la alerta

lo que ocurre es que los botones están pidiendo document.createAttribute() y su consola dev llama a la función que declaró.

Solución: utilice un nombre de función diferente o mejor aún, un espacio de nombres.

Answer 6

Si usted está dispuesto a sacrificar un poco el rendimiento y puede utilizar una biblioteca externa se recomienda usar:

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]; 

Este se ocupa de todas las inconsistencias entre los navegadores y también es mucho más bonita :-)

Nota: Este es un pseudocódigo no comprobado - consulte las páginas de documentación oficial de Prototype JS y jQuery para obtener más información.