¿Cómo se publica en un iframe?
https://stackoverflow.com/questions/168455
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Cómo publicar datos en un iframe?
Solución
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 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 un evitar aquí ), pero si está utilizando 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 de peculiaridades " 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 usted 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.
Otros consejos
Un iframe se usa para incrustar otro documento dentro de una página html.
Si el formulario se debe enviar a un iframe dentro de la página del formulario, entonces 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 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 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 de destino al iframe, y se abre un 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.
Exmaple
<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 de destino, y los datos son 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;
}
