post - form - ¿Cómo publicar en un iframe?

html post new window

Question

¿Cómo publicar datos en un iframe?

Answer 1

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 nombre ''attr'' del iFrame de destino, y data es un objeto JS:

data={last_name:''Smith'',first_name:''John''}

Answer 2

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;
}

Answer 3

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

Si el formulario debe enviarse a un iframe dentro de la página del formulario, entonces se puede lograr fácilmente utilizando el atributo de destino de la etiqueta.

Establezca el atributo de destino del formulario al 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 del 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 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 objetivo establecido en el 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>

Answer 4

Depende de lo que quieras decir con "publicar datos". Puede usar el atributo HTML target="" en una etiqueta <form /> , 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 está buscando algo más complejo, edite su pregunta para incluir más detalles.

Hay un error conocido con Internet Explorer que solo ocurre cuando estás creando dinámicamente tus iframes, etc. utilizando Javascript (hay una solución alternativa aquí ), pero si estás usando un marcado HTML normal, estás bien. El atributo de destino y los nombres de los cuadros no son un hack inteligente de ninja; 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, 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 utilizando Internet Explorer 7.0.5730.13. Mi caso de prueba consta de dos archivos, utilizando 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 mucho saber de cualquier navegador que no ejecute estos ejemplos correctamente.