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

internet-explorer-9 domexception

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

Obtengo la siguiente excepción: SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5)

Es el fragmento de código anterior no conforme a los estándares. ¿Cuál es la solución para el problema?

Answer 1

Esta es una solución para jquery''s jquery.bgiframe.js .

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 2

Este error puede venir cuando accidentalmente se usan nombres de funciones de JavaScript estándar como sus propios nombres de funciones si no se usan espacios de nombres. Por ejemplo, tengo un concepto llamado "Atributo" y quería probar una nueva función que creó uno nuevo:

<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" no obtienes nada
• Al hacer clic en Foo se obtiene INVALID_CHARACTER_ERR (5) o InvalidCharacterError: DOM Exception 5
• Al abrir su consola de desarrollo y ejecutar createAttribute(''Django'') le da la alerta

Lo que está sucediendo es que los botones están llamando a document.createAttribute() y su consola dev está llamando a la función que usted declaró.

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

Answer 3

La API para createElement especifica que el constructor desea una string que especifique el nombre de un elemento. Parece que IE9 sigue más estrictamente los estándares. Puede lograr lo mismo que está 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 4

Para jQuery.bgiframe.js, ¿sería una mejor solución reparar el error de IE6?

¿Qué hay de reemplazar esto?

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

con algo como esto:

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

Answer 5

Para jquery.bgiframe.js:

Descargué la versión 1.1.3 pre en

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

y esto resolvió el problema.

Answer 6

Si está dispuesto a sacrificar un poco de rendimiento y puede usar una biblioteca externa, le sugiero que use:

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

Esto soluciona todas las incoherencias entre los navegadores y también es mucho más bonito :-)

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