IE Problema: El envío de formulario para un iframe usando javascript

yo estaba tratando de crear un elemento iframe usando javascript, así:IE Problema: El envío de formulario para un iframe usando javascript

var iframe = document.createElement('iframe'); 
iframe.setAttribute('name', 'frame_x');

Sin embargo, cuando intenté enviar un formulario usando el iframe recién creado como objetivo , IE abre una nueva ventana, en lugar de usar el iframe.

form.setAttribute('target', 'frame_x'); 
form.submit();

Esto funciona perfectamente en Firefox. Además, el iframe se crea, pero no se usa.

Fuente

2010-02-02 Erwin

Usted ha golpeado un bug in Internet Explorer.

Usted NO puede establecer el atributo nombre de CUALQUIER elemento en IE utilizando el método estándar DOM .setAttribute('name', value);

En IE (antes de la versión 8 se ejecuta en modo estándar de IE8) Este método no trabajar para establecer el atributo de nombre.

Es necesario utilizar uno de los siguientes:

//A (any browser) 
var iframe = document.createElement('iframe'); 
iframe.name = 'frame_x'; 

//B (only in IE) 
var iframe = document.createElement('<iframe name="frame_x"/>'); 

//C (use a JS library that fixes the bug (e.g. jQuery)) 
var iframe = $('<iframe name="frame_x"></iframe>'); 

//D (using jQuery to set the attribute on an existing element) 
$('iframe:first').attr('name','frame_x');

Fuente

2010-02-02 02:49:52 scunliffe

+1 buena información ... gracias –

Gracias scunliffe. Esta es una información muy útil. – Erwin

+1 - en mi mente la respuesta correcta aquí. –

Bienvenido a SO.

Un problema que vi en su código es que en realidad nunca se muestra el iframe. Para que aparezca en la página, debe insertarlo en su documento. En mi ejemplo, creo una etiqueta <span> para que actúe como la ranura donde se insertará el iframe.

Vea si esto hace lo que está buscando.

<!-- http://stackoverflow.com/questions/2181385/ie-issue-submitting-form-to-an-iframe-using-javascript --> 

<html> 
<head> 
<script type="text/javascript"> 
function submitFormToIFrame(){ 
    var form=document.getElementById('myform'); 
    form.setAttribute('target', 'frame_x'); 
    form.submit(); 
} 
</script> 
</head> 

<body> 
<h1>Hello Erwin!</h1> 

<form id="myform" name="myform" action="result.html"> 
    <input type="button" value="Submit the Form" onClick="submitFormToIFrame();"> 
</form> 


<span id="iframeSlot"> 

<script type="text/javascript"> 
    var iframe = document.createElement('iframe'); 
    iframe.setAttribute('name', 'frame_x'); 
    document.getElementById('iframeSlot').appendChild(iframe); 
</script> 
</span> 
</body> 
</html>

ACTUALIZACIÓN:

He encontrado que esta solución solo está trabajando en Firefox. Así que hice algo de experimentación. Parece que si defines el iframe en el html (en lugar de generarlo a través de JS/DOM) entonces funciona. Esta es la versión que funciona con IE y Firefox:

<html> 
<head> 
<script type="text/javascript"> 
function submitFormToIFrame(){ 
    //IE 
    if(document.myform){ 
     document.myform.setAttribute('target','frame_x'); 
     document.myform.submit(); 
    //FF 
    } else { 
     var form=document.getElementById('myform'); 
     form.setAttribute('target', 'frame_x'); 
     form.submit(); 
    } 
} 
</script> 
</head> 

<body> 
<h1>Hello Erwin!</h1> 

<form id="myform" name="myform" action="result.html" target=""> 
    <input type="button" value="Submit the Form" onClick="submitFormToIFrame();"> 
</form> 

<span id="iframeSlot"> 
<iframe name="frame_x"> 
</iframe> 
</span> 
</body> 
</html>

Fuente

2010-02-02 01:58:55

¡Hola! Gracias por la respuesta. En realidad, no incluí en mi publicación la parte donde se agrega el iframe a un elemento div, y el elemento al document.body (usando appendChild). Dado que el iframe ya se ha agregado al cuerpo, el formulario todavía no está dirigido al iframe. Pero esto solo ocurre en IE. – Erwin

@Erwin, tienes toda la razón. He estado experimentando con esto y actualicé mi respuesta. Espero eso ayude. –

Esto funcionó! Buena esa. Sin embargo, todavía tengo algunas preguntas sin resolver. ¿Cuál podría haber sido la diferencia?¿No basta con tener una referencia al objeto de formulario (usando getElementById en este caso)? Además, cuando intenté crear el formulario utilizando javascript, en lugar de tener un elemento de formulario dentro del html, volvió a producirse el mismo problema. Pero esta vez, la cláusula if-else para implementaciones IE/FF ya no parece funcionar. ¿Alguna idea? Pero aún así, ¡gracias por la respuesta! – Erwin

function sendForm(idform){ 
    var nfi = "RunF"+tagRandom(); 
    $("body").append("<iframe name=\""+nfi+"\" id=\""+nfi+"\" class=\"runAgents\" src=\"#\"></iframe>"); 
    $("#"+idform).attr("target",nfi); 
    $("#"+idform).submit(); 
}

Fuente

2012-05-16 18:55:39 jceyca

Es útil agregar algún tipo de comentario con su respuesta para explicar cómo ayuda su código. – RThomas

Para continuar respuesta de @ scunliffe, si se utiliza Prototype.js:

var iframe = Element('iframe', {name: 'frame_x'});

el cual funciona porque esta función auxiliar detecta HAS_EXTENDED_CREATE_ELEMENT_SYNTAX para IE, trabajando alrededor del error .name = ….

Fuente

2014-01-07 18:35:31

IE Problema: El envío de formulario para un iframe usando javascript

Respuesta

Cuestiones relacionadas