2010-01-20 8 views
10

Estoy haciendo una carga de archivo de estilo ajax publicando el archivo en un formulario para un iframe y noté un comportamiento extraño en IE (parece suceder en ambos 6 & 8). Básicamente en IE, el formulario no target el iframe correctamente por lo que la respuesta aparece en una nueva ventana (en lugar de en el iframe). Puede reproducir el problema con el siguiente conjunto mínimo de HTML/JS:Comportamiento extraño del atributo iframe `name` establecido por jQuery en IE

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.3.2.js"></script> 
    <script> 
    $(document).ready(function(){ 
     var frameName = "myFrame"; 
     var $iframe = $("<iframe src=\"about:blank\" />") 
       .attr("name", frameName) 
       .appendTo("body"); 
     var $uploadForm = $("<form action=\"http://www.google.com/search\" />") 
       .attr("target", frameName) 
       .append("<input type=\"text\" name=\"q\" />") 
       .append("<input type=\"submit\" />") 
       .appendTo("body"); 
    }); 
    </script> 
</head> 
<body> 
</body> 
</html> 

ahora (antes de publicar una respuesta), he hecho un poco de investigación (utilizando herramientas de desarrollo de IE8) y parece que la .attr("name", frameName) está añadiendo el atributo como submitName="myFrame" en lugar de simplemente name="myFrame". Basado en esto, he resuelto el problema cambiando el código iframe creación de los poco más desagradable:

var $iframe = $("<iframe src=\"about:blank\" name=\"" + frameName + "\" />") 
     .appendTo("body"); 

Este cambio hace que el mensaje formulario en el marco flotante según se desee.

Mis preguntas son:

  • Por qué no .attr("name", ...) trabajo como se esperaba?
  • ¿Es un error en jQuery, un error en IE (seguramente no!?!), ¿O me falta algo obvio?
  • ¿De dónde viene el atributo submitName de & cuál es su propósito?

Respuesta

16

un error en el IE

Es difícil de creer, lo sé, pero no somos (seguramente no!?!) .

Históricamente (*), establecer el atributo name tiene muchos problemas en IE. Tiende a sostenerse solo parcialmente. Por ejemplo, en nombres de campos de formulario, no afecta a la búsqueda form.elements[name] como debería. Este parece ser otro caso donde la configuración de la propiedad name no es confiable.

Mientras que jQuery intenta solucionar errores del navegador como este, no capta todo, y no hay forma conocida de resolverlo por completo.

(*: en IE hasta 7. Si ejecuta IE8 en modo documento nativo utilizando un tipo de documento doctype y si es necesario un encabezado/meta compatible con X-UA, estos dos errores no aparecen)

El submitName que aparece en las herramientas de desarrollo es un vistazo interesante detrás de las escenas de un error de IE, ya que no aparece en el DOM visible al público en absoluto. Hace lo mismo si observa un elemento <input> o <form> cuyo atributo name se ha escrito después de la creación también.

Lo que parece estar sucediendo es que IE-up-7 redirige todo el uso de los atributos llamados name a una propiedad invisible, internamente llamada submitName, que para los campos de formulario cambia los datos que el campo generará como parte de un envío de formulario, pero que no cambia el atributo real name utilizado para la indexación HTMLCollection, la agrupación por radio, getElementsByName o, en el caso de [i] frames, la segmentación.

+0

Gracias por los antecedentes, creo que esta es una respuesta tan definitiva como la que voy a obtener, mostrando a cualquier ex-desarrollador de IE publicando (aunque no puedo imaginarlos admitiendo el hecho: P), entonces estoy aceptando eso. Es bueno saber que al menos el error desaparece en IE8 si tienes el doctype correcto en su lugar. – Alconja

+0

'getElementsByName', la agrupación por radio y demás parecen funcionar, aunque los atributos' name' siguen siendo los mismos y solo cambian los atributos 'submitName'" ¿Ha tenido algún problema con las cosas que mencionó? Probé esto en el modo de compatibilidad ie7 en ie8, y todo parecía funcionar. – cic

+0

Algo más de información: http://thunderguy.com/semicolon/2005/05/23/setting-the-name-attribute-in-internet-explorer/ – cic

0

¿Has visto el markup creation improvements en jQuery 1.4?

Si encuentra que desagradable, intente esto:

$('<iframe />', 
{ 
    name: frameName, 
    src: 'about:blank' 
}).appendTo("body"); 
+0

No hace la menor diferencia: la configuración 'nombre' del nuevo objeto' {attrs} 'falla de la misma manera que se establece usando' attr() '. – bobince

+0

Es una pena, todavía, las mejoras de marcado merecen ser mostradas. +1 bobince –

+0

Sí, he visto la nueva sintaxis (pegado con 1.3.2 para este proyecto), pero eso en realidad no responde mi pregunta ... El problema todavía existe usando la nueva sintaxis y 1.4 de todos modos (creo que lo que escribió es efectivamente equivalente a mi original '.attr (" nombre ", frameName)'). – Alconja

2

No es solo un problema de jQuery, cuando se configura manualmente, sucede también.

Si usa el método setAttribute() para establecerlo, incluso sin jQuery, ¡hace lo mismo cuando se acaba de crear el formulario o el iframe! De la misma manera, utilizando el innerHTML se puede arreglar ... sí, una vez más, es el Microsoft destruyendo mi día:/

4

crear el elemento como éste

$("<iframe name='frameName' />") 

resolvió el problema para mí

Cuestiones relacionadas