¿Cómo se publica en un iframe?

Resuelto Murtaza Mandvi asked hace 15 años • 5 respuestas

¿Cómo se publican datos en un iframe?

Murtaza Mandvi avatar Oct 04 '08 02:10 Murtaza Mandvi
Aceptado

Depende de lo que quieras decir con "datos de publicación". Puedes 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 busca algo más complejo, edite su pregunta para incluir más detalles.

Hay un error conocido con Internet Explorer que sólo ocurre cuando estás creando dinámicamente tus iframes, etc. usando Javascript (hay una solución aquí ), pero si estás usando formato HTML normal, estás bien. El atributo de destino y los nombres de los fotogramas no son un ingenioso truco ninja; aunque quedó obsoleto (y por lo tanto no se validará) en HTML 4 Strict o XHTML 1 Strict, ha sido parte de HTML desde 3.2, es formalmente 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, que utilizan ASP clásico en IIS 6; se reproducen aquí en su totalidad para que pueda verificar este comportamiento usted mismo.

predeterminado.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>

hacer_cosas.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 mucho saber de algún navegador que no ejecute estos ejemplos correctamente.

Dylan Beattie avatar Oct 03 '2008 19:10 Dylan Beattie

Un iframe se utiliza 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 lograr fácilmente utilizando el atributo de destino de la etiqueta.

Establezca el atributo de destino del formulario con el nombre de la etiqueta 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 utilizar para producir una experiencia similar a ajax, especialmente en casos como la carga de archivos, en cuyo caso se vuelve obligatorio enviar el formulario para poder cargar los archivos.

El iframe se puede establecer en un ancho y alto de 0, y el formulario se puede enviar con el objetivo establecido en el iframe y se puede abrir 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 cuadro de 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 avatar Jun 21 '2012 04:06 kapil