javascript - Excepción de DOM de caracteres no válidos en IE9
internet-explorer-9 domexception (6)
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 );
}
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?
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)
oInvalidCharacterError: 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.
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
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")
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.
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.