Come pubblichi su un iframe?
https://stackoverflow.com/questions/168455
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Come si pubblicano i dati su un iframe?
Soluzione
Dipende da cosa intendi per " pubblica i dati " ;. Puoi utilizzare l'attributo HTML target="" su un tag <form />, 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 si creano dinamicamente i propri iframe, ecc. usando Javascript (c'è un aggirare qui ), 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 che questo comportamento funziona con XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict e in " quirks mode " 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.
Altri suggerimenti
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.
Imposta 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, soprattutto 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 la destinazione impostata 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 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, quindi 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;
}
