Come si pubblicano i dati su un iframe?
Come si pubblicano i dati su un iframe?
Risposte:
Dipende da cosa intendi per "dati post". Puoi utilizzare l' target=""attributo HTML su un <form />tag, quindi potrebbe essere semplice come:
<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>
In caso contrario, o stai cercando qualcosa di più complesso, modifica la tua domanda per includere ulteriori dettagli.
Esiste un bug noto con Internet Explorer che si verifica solo quando crei dinamicamente i tuoi iframe, ecc. Usando Javascript (qui c'è una soluzione alternativa ), ma se stai usando il normale markup HTML, stai bene. L'attributo target e i nomi dei frame non sono alcuni hack ninja intelligenti; sebbene sia stato deprecato (e quindi non convaliderà) in HTML 4 Strict o XHTML 1 Strict, fa parte di HTML dal 3.2, è formalmente parte di HTML5 e funziona in quasi tutti i browser da Netscape 3.
Ho verificato questo comportamento lavorando con XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict e in "modalità stranezze" senza DOCTYPE specificato, e funziona in tutti i casi utilizzando Internet Explorer 7.0.5730.13. Il mio caso di test è costituito da due file, usando ASP classico su IIS 6; sono riprodotti qui per intero in modo da poter verificare questo comportamento da soli.
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>
Sarei molto interessato a conoscere qualsiasi browser che non esegue correttamente questi esempi.
targetattributo per un HTML <form>. Dopo che il modulo è stato pubblicato e posso vedere il contenuto nell'iframe di destinazione, voglio fornire all'utente un'opzione per salvare questo contenuto in un file. Questo è ciò che intendevo chiedere. Fammi sapere se questo richiede maggiore chiarezza.
Un iframe viene utilizzato per incorporare un altro documento all'interno di una pagina html.
Se il modulo deve essere inviato a un iframe all'interno della pagina del modulo, può essere facilmente raggiunto utilizzando l'attributo target del tag.
Impostare l'attributo target del modulo sul nome del tag 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 avanzato dell'iframe target
Questa proprietà può anche essere utilizzata per produrre un'esperienza simile a Ajax, in particolare in casi come il caricamento di file, nel qual caso diventa obbligatorio inviare il modulo, al fine di caricare i file
L'iframe può essere impostato su una larghezza e un'altezza pari a 0 e il modulo può essere inviato con l'obiettivo impostato sull'iframe e una finestra di dialogo di caricamento può essere aperta prima di inviare il modulo. Quindi, prende in giro un controllo Ajax poiché il controllo rimane ancora sul modulo di input jsp, con la finestra di dialogo di caricamento aperta.
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>
Questa funzione crea un modulo temporaneo, quindi invia i dati utilizzando 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 è l'attr 'nome' dell'iFrame di destinazione e data è un oggetto JS:
data={last_name:'Smith',first_name:'John'}
Se si desidera modificare gli input in un iframe, inviare il modulo da tale iframe, farlo
...
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, puoi farlo solo se la pagina nell'iframe proviene dalla stessa origine, ma puoi avviare Chrome in una modalità di debug per ignorare la stessa politica di origine e testarla su qualsiasi pagina.
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;
}