Comment publier sur un iframe?

266

Comment publier des données sur un iframe?

post iframe

— Murtaza Mandvi
source

407

Cela dépend de ce que vous entendez par «publier des données». Vous pouvez utiliser l' target=""attribut HTML sur une <form />balise, cela pourrait donc ê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 recherchez quelque chose de plus complexe, veuillez modifier votre question pour inclure plus de détails.

Il y a un bogue connu avec Internet Explorer qui ne se produit que lorsque vous créez dynamiquement vos iframes, etc. en utilisant Javascript (il y a une solution ici ), mais si vous utilisez un balisage HTML ordinaire, tout va bien. L'attribut cible et les noms de trame ne sont pas un hack ninja intelligent; bien qu'il soit obsolète (et ne sera donc pas validé) dans HTML 4 Strict ou XHTML 1 Strict, il fait partie de HTML depuis 3.2, il fait officiellement partie de HTML5, et il fonctionne dans à peu près 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 excentrique" sans DOCTYPE spécifié, et cela fonctionne dans tous les cas en utilisant Internet Explorer 7.0.5730.13. Mon cas de test se compose de deux fichiers, utilisant 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é d'entendre parler de tout navigateur qui ne fonctionne pas correctement avec ces exemples.

— Dylan Beattie
source

1

Comme indiqué ci-dessous, la cible sur le formulaire peut ne pas fonctionner dans IE7 - vous voudrez le tester.

— NexusRex

12

Le problème avec IE 7 est que si vous générez l'iframe en utilisant javascript, la balise de nom n'est pas définie (même si vous essayez de la définir) pourquoi la cible de publication échouera. La solution pour IE7: stackoverflow.com/questions/2181385/…

— mrD

Existe-t-il un moyen de sauvegarder le contenu du cadre de sortie dans un fichier (par exemple, la réponse du serveur auquel le formulaire a été soumis)?

— ZeroGraviti

@ZeroGraviti Ce que vous entendez par «enregistrer dans un fichier» n'est pas tout à fait clair. Ce que vous pouvez faire est de soumettre le formulaire à un IFRAME et de demander à la réponse de définir un en-tête Content-Disposition comme décrit dans stackoverflow.com/questions/1012437/… - de sorte que l'utilisateur clique sur "soumettre", il publie sur un IFRAME, le le navigateur reçoit la réponse et invite l'utilisateur à enregistrer le fichier sur sa machine locale. C'est ça que tu cherches?

— Dylan Beattie

@DylanBeattie, permettez-moi de clarifier mon cas d'utilisation. J'ai pu remplir un iframe qui a été défini comme targetattribut pour un html <form>. Une fois que le formulaire a été publié et que je peux voir le contenu dans l'iframe cible, je veux fournir à l'utilisateur une option pour enregistrer ce contenu dans un fichier. C'est ce que je voulais demander. Faites-moi savoir si cela nécessite plus de clarté.

— ZeroGraviti

25

Un iframe est utilisé pour incorporer un autre document dans une page html.

Si le formulaire doit être soumis à un iframe dans la page du formulaire, il peut être facilement obtenu à l'aide de l'attribut cible 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 des cibles 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, 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, et le formulaire peut être soumis avec la cible définie sur l'iframe, et une boîte de dialogue de chargement s'ouvre avant de soumettre le formulaire. Ainsi, il se moque d'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.

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>

— kapil
source

Merci, il est important que <iframe> soit après </form> comme vous l'avez écrit

— Igor Fomenko

2

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();
}

cible est l'attraction du «nom» de l'iFrame cible, et les données sont un objet JS:

data={last_name:'Smith',first_name:'John'}

— Dr Fred
source

0

Si vous souhaitez modifier les entrées dans un iframe, puis 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 est 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;
}

— Dominique Fortin
source