Cela dépend de ce que vous entendez par "données postales". Vous pouvez utiliser l'attribut HTML target="" sur une balise <form /> pour qu'il soit aussi simple que:
<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 ce n'est pas le cas ou si vous recherchez quelque chose de plus complexe, modifiez votre question pour y inclure plus de détails.
Il existe un bogue connu avec Internet Explorer qui ne se produit que lorsque vous créez dynamiquement vos iframes, etc., à l'aide de Javascript (il existe un solution de contournement ici ), mais si vous utilisez du balisage HTML ordinaire, vous êtes bien. L'attribut cible et les noms de cadre ne sont pas des astuces de ninja; Bien que déconseillé (et donc non valide) en HTML 4 Strict ou XHTML 1 Strict, il fait partie du HTML depuis 3.2, il fait officiellement partie de HTML5 et fonctionne dans presque tous les navigateurs depuis Netscape 3.
J'ai vérifié que ce comportement fonctionnait avec XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict et en "mode bizarre" sans qu'aucun DOCTYPE ne soit spécifié, et cela fonctionne dans tous les cas avec Internet Explorer 7.0.5730.13. Mon cas de test est constitué de deux fichiers, en utilisant le classique ASP sur IIS 6; ils sont reproduits ici pour que vous puissiez vérifier vous-même ce comportement.
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>
Je serais très intéressé d'entendre parler de tout navigateur qui n'exécute pas correctement ces exemples.
Un iframe est utilisé pour incorporer un autre document dans une page HTML.
Si le formulaire doit être soumis à un iframe dans la page de formulaire, il peut être facilement réalisé à l'aide de l'attribut target de la balise.
Définissez l'attribut cible du formulaire sur le nom de la balise 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>
Utilisation avancée de la cible iframe
Cette propriété peut également être utilisée pour produire une expérience similaire à ajax, en particulier dans des cas tels que le téléchargement de fichiers, auquel cas il devient obligatoire de soumettre le formulaire afin de télécharger les fichiers.
L'iframe peut être défini sur une largeur et une hauteur de 0, le formulaire peut être soumis avec la cible définie sur l'iframe et une boîte de dialogue de chargement ouverte avant la soumission du formulaire. Donc, il moque un contrôle ajax car le contrôle reste toujours sur le formulaire d’entrée jsp, avec la boîte de dialogue de chargement ouverte.
Exemple
<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>
Cette fonction crée un formulaire temporaire, puis envoie des données à l'aide de 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 est le nom de l’attr de l’iFrame cible et data est un objet JS:
data={last_name:'Smith',first_name:'John'}
Si vous souhaitez modifier les entrées dans un iframe, soumettez le formulaire à partir de cet iframe, procédez comme suit:
...
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();
}
...
Normalement, vous ne pouvez le faire que si la page de l'iframe provient de la même origine, mais vous pouvez démarrer Chrome en mode débogage pour ignorer la même stratégie d'origine et la tester sur n'importe quelle page.
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;
}