Come pubblichi su un iframe?


Risposte:


407

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.


1
Come indicato di seguito, l'obiettivo nel modulo potrebbe non funzionare in IE7, è consigliabile verificarlo.
NexusRex,

12
Il problema con IE 7 è che se si genera l'iframe utilizzando javascript il tag del nome non è impostato (anche se si tenta di impostarlo) perché la destinazione del post fallirà. La soluzione per IE7: stackoverflow.com/questions/2181385/...
MRD

Esiste un modo per salvare il contenuto del frame di output in un file (ad esempio, la risposta dal server a cui è stato inviato il modulo)?
ZeroGraviti,

@ZeroGraviti Non è del tutto chiaro cosa intendi con "salva in un file". Quello che potresti fare è inviare il modulo a un IFRAME e far impostare la risposta a un'intestazione Content-Disposition come descritto in stackoverflow.com/questions/1012437/… - quindi l'utente fa clic su "invia", pubblica su un IFRAME, il il browser riceve la risposta e richiede all'utente di salvare il file sul proprio computer locale. È quello che stai cercando?
Dylan Beattie,

@DylanBeattie, permettimi di chiarire il mio caso d'uso. Sono stato in grado di popolare un iframe che è stato impostato come l' 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.
ZeroGraviti,

25

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>

Grazie, è importante che <iframe> sia dopo </form> come hai scritto
Igor Fomenko,

2

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

0

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;
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.