Comment afficher des données dans une iframe ?
Comme on l'a fait remarquer ci-dessous, la cible du formulaire peut ne pas fonctionner dans IE7 - vous voudrez tester cela.
Réponses
Trop de publicités?Cela dépend de ce que vous entendez par "données postales". Vous pouvez utiliser le code HTML target="" sur un <form /> donc cela pourrait être 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 cherchez quelque chose de plus complexe, veuillez modifier 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 y a une solution de contournement ici ), mais si vous utilisez le balisage HTML ordinaire, tout va bien. L'attribut target et les noms de cadre ne sont pas des astuces de ninja ; bien qu'ils aient été dépréciés (et ne seront donc pas validés) dans HTML 4 Strict ou XHTML 1 Strict, ils font partie de HTML depuis 3.2, ils font officiellement partie de HTML5, et ils fonctionnent dans presque tous les navigateurs depuis Netscape 3.
J'ai vérifié que ce comportement fonctionne avec XHTML 1 Strict, XHTML 1 Transitional, HTML 4 Strict et en mode "quirks" sans DOCTYPE spécifié, et il fonctionne dans tous les cas avec Internet Explorer 7.0.5730.13. Mon scénario de test consiste en deux fichiers, utilisant l'ASP classique sur IIS 6 ; ils sont reproduits ici dans leur intégralité afin que vous puissiez vérifier ce comportement par vous-même.
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é de connaître un navigateur qui n'exécute pas ces exemples correctement.
Le problème avec IE 7 est que si vous générez l'iframe en utilisant le javascript, la balise name n'est pas définie (même si vous essayez de la définir), ce qui fait que le post target échoue. La solution pour IE7 : stackoverflow.com/questions/2181385/
Existe-t-il un moyen d'enregistrer le contenu du cadre de sortie dans un fichier (par exemple, la réponse du serveur auquel le formulaire a été soumis) ?
kapil
Points
321
Un iframe est utilisé pour intégrer un autre document dans une page html.
Si le formulaire doit être soumis à une iframe dans la page du formulaire, il est facile d'y parvenir en utilisant l'attribut target de la balise.
Définissez l'attribut cible du formulaire comme étant 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 de type ajax, en particulier dans des cas comme le téléchargement de fichiers, où il devient obligatoire de soumettre le formulaire, afin de télécharger les fichiers.
L'iframe peut être défini avec une largeur et une hauteur de 0, et le formulaire peut être soumis avec la cible définie sur l'iframe, et une boîte de dialogue de chargement ouverte avant de soumettre le formulaire. Ainsi, il simule un contrôle ajax car le contrôle reste toujours sur le formulaire d'entrée jsp, avec le dialogue de chargement ouvert.
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>
Remarque : le robot d'exploration Google pénalise fortement le classement SERP des sites Web lorsqu'il détecte des éléments dont la hauteur/largeur est nulle sur une page. Si quelqu'un décide d'utiliser cette technique d'iframe, il est recommandé de spécifier explicitement que Google ne peut pas explorer la page du formulaire via robots.txt, la balise meta robots de la page et le lien de la page de référence avec l'attribut rel=nofollow.
AaronSieb
Points
4598
J'imagine que vous devez générer dynamiquement un formulaire dans l'iframe, puis l'afficher.
Voici une discussion sur la façon de procéder pour une page de premier niveau :
http://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit
Vous devriez pouvoir le modifier pour créer le formulaire dans une iframe à la place.
Dr Fred
Points
31
Cette fonction crée un formulaire temporaire, puis envoie des données en utilisant 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 l'attr "name" de l'iFrame cible, et data est un objet JS :
data={last_name:'Smith',first_name:'John'}
Dominique Fortin
Points
83
Si vous souhaitez modifier les entrées dans une iframe puis soumettre le formulaire à partir de cette 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 dans l'iframe a la même origine, mais vous pouvez lancer Chrome en mode débogage pour ne pas tenir compte de la politique de la même origine et tester cela 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;
}- Réponses précédentes
- Plus de réponses
