¿Cómo se publica en un iframe?

Respuestas:

407

Depende de lo que entiendas por "publicar datos". Puede usar el target=""atributo HTML en una <form />etiqueta, por lo que podría ser tan simple como:

<form action="do_stuff.aspx" method="post" target="my_iframe">
  <input type="submit" value="Do Stuff!">
</form>

<!-- when the form is submitted, the server response will appear in this iframe -->
<iframe name="my_iframe" src="not_submitted_yet.aspx"></iframe>

Si no es así, o si busca algo más complejo, edite su pregunta para incluir más detalles.

Existe un error conocido con Internet Explorer que solo ocurre cuando está creando dinámicamente sus iframes, etc., usando Javascript (hay una solución alternativa aquí ), pero si está usando un marcado HTML normal, está bien. El atributo de destino y los nombres de los marcos no son un truco ninja inteligente; aunque fue obsoleto (y, por lo tanto, no se validará) en HTML 4 Strict o XHTML 1 Strict, ha sido parte de HTML desde 3.2, formalmente es parte de HTML5 y funciona en casi todos los navegadores desde Netscape 3.

He verificado que este comportamiento funciona con XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict y en "modo peculiar" sin DOCTYPE especificado, y funciona en todos los casos con Internet Explorer 7.0.5730.13. Mi caso de prueba consta de dos archivos, usando ASP clásico en IIS 6; se reproducen aquí en su totalidad para que pueda verificar este comportamiento por sí mismo.

default.asp

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Form Iframe Demo</title>
  </head>
  <body>
  <form action="do_stuff.asp" method="post" target="my_frame">
    <input type="text" name="someText" value="Some Text">
    <input type="submit">
  </form>
  <iframe name="my_frame" src="do_stuff.asp">
  </iframe>
  </body>
</html>

do_stuff.asp

<%@Language="JScript"%><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Form Iframe Demo</title>
  </head>
  <body>
  <% if (Request.Form.Count) { %>
  You typed: <%=Request.Form("someText").Item%>
  <% } else { %>
  (not submitted)
  <% } %>
  </body>
</html>

Me interesaría saber de cualquier navegador que no ejecute estos ejemplos correctamente.

Dylan Beattie
fuente
1
Como se señaló a continuación, el objetivo en el formulario puede no funcionar en IE7; querrá probar eso.
NexusRex
12
El problema con IE 7 es que si genera el iframe usando javascript, la etiqueta de nombre no se establece (incluso si intenta configurarlo) por qué fallará el objetivo de publicación. La solución para IE7: stackoverflow.com/questions/2181385/…
mrD
¿Hay alguna manera de guardar el contenido del marco de salida en un archivo (por ejemplo, la respuesta del servidor al que se envió el formulario)?
ZeroGraviti
@ZeroGraviti No está muy claro qué quiere decir con "guardar en un archivo". Lo que puede hacer es enviar el formulario a un IFRAME, y que la respuesta establezca un encabezado de Disposición de contenido como se describe en stackoverflow.com/questions/1012437/… - para que el usuario haga clic en "enviar", publique en un IFRAME, el el navegador recibe la respuesta y le solicita al usuario que guarde el archivo en su máquina local. ¿Es eso lo que buscas?
Dylan Beattie
@DylanBeattie, déjame aclarar mi caso de uso. He podido rellenar un iframe que se ha establecido como targetatributo para un html <form>. Después de que se haya publicado el formulario y pueda ver el contenido en el iframe de destino, quiero proporcionarle al usuario una opción para guardar este contenido en un archivo. Esto es lo que quise preguntar. Avíseme si esto necesita más claridad.
ZeroGraviti
25

Un iframe se usa para incrustar otro documento dentro de una página html.

Si el formulario se va a enviar a un iframe dentro de la página del formulario, se puede obtener fácilmente utilizando el atributo de destino de la etiqueta.

Establezca el atributo de destino del formulario con el nombre de la etiqueta de iframe.

<form action="action" method="post" target="output_frame">
    <!-- input elements here --> 
</form>
<iframe name="output_frame" src="" id="output_frame" width="XX" height="YY">
</iframe>

Uso avanzado de destino de iframe
Esta propiedad también se puede usar para producir una experiencia similar a ajax, especialmente en casos como la carga de archivos, en cuyo caso es obligatorio enviar el formulario para cargar los archivos

El iframe se puede establecer en un ancho y alto de 0, y el formulario se puede enviar con el conjunto objetivo al iframe, y se abre un cuadro de diálogo de carga antes de enviar el formulario. Por lo tanto, se burla de un control ajax ya que el control aún permanece en el formulario de entrada jsp, con el diálogo de carga abierto.

Ejemplo

<script>
$( "#uploadDialog" ).dialog({ autoOpen: false, modal: true, closeOnEscape: false,                 
            open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); } });

function startUpload()
{            
    $("#uploadDialog").dialog("open");
}

function stopUpload()
{            
    $("#uploadDialog").dialog("close");
}
</script>

<div id="uploadDialog" title="Please Wait!!!">
            <center>
            <img src="/imagePath/loading.gif" width="100" height="100"/>
            <br/>
            Loading Details...
            </center>
 </div>

<FORM  ENCTYPE="multipart/form-data" ACTION="Action" METHOD="POST" target="upload_target" onsubmit="startUpload()"> 
<!-- input file elements here--> 
</FORM>

<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;" onload="stopUpload()">   
        </iframe>
kapil
fuente
Gracias, es importante que <iframe> deba estar después </form> como escribió
Igor Fomenko
2

Esta función crea un formulario temporal, luego envía datos usando jQuery:

function postToIframe(data,url,target){
    $('body').append('<form action="'+url+'" method="post" target="'+target+'" id="postToIframe"></form>');
    $.each(data,function(n,v){
        $('#postToIframe').append('<input type="hidden" name="'+n+'" value="'+v+'" />');
    });
    $('#postToIframe').submit().remove();
}

target es el atributo 'name' del iFrame target, y data es un objeto JS:

data={last_name:'Smith',first_name:'John'}
Dr. Fred
fuente
0

Si desea cambiar las entradas en un iframe, envíe el formulario desde ese iframe, haga esto

...
var el = document.getElementById('targetFrame');

var doc, frame_win = getIframeWindow(el); // getIframeWindow is defined below

if (frame_win) {
  doc = (window.contentDocument || window.document);
}

if (doc) {
  doc.forms[0].someInputName.value = someValue;
  ...
  doc.forms[0].submit();
}
...

Normalmente, solo puede hacer esto si la página en el iframe es del mismo origen, pero puede iniciar Chrome en modo de depuración para ignorar la misma política de origen y probar esto en cualquier página.

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}
Dominique Fortin
fuente