¿Cómo se publican datos en un iframe?
¿Cómo se publican datos en un iframe?
Respuestas:
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.
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.
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>
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'}
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;
}