Comment pensez-vous poster une iframe?

Comment avez-vous publier des données sur un iframe?

InformationsquelleAutor Murtaza Mandvi | 2008-10-03

393

Dépend de ce que tu veux dire par "publier des données". Vous pouvez utiliser le code HTML target="" attribut sur un <form /> tag, alors il pourrait être aussi simple que:
```
<form action="do_stuff.aspx" method="post" target="my_iframe">
  <input type="submit" value="Do Stuff!" />
</form>


<iframe name="my_iframe" src="not_submitted_yet.aspx"></iframe>
```
Si ce n'est pas ça, ou que vous cherchez quelque chose de plus complexe, merci de modifier vos question pour inclure plus de détails.

Il y a un bug connu avec Internet Explorer qui ne se produit que lorsque vous êtes à la création dynamique de votre iframes, etc. à l'aide de Javascript (il y a un travail autour d'ici), mais si vous êtes en utilisant des balises HTML, vous êtes fine. L'attribut cible et le cadre de noms n'est pas un habile ninja hack; bien qu'il était déconseillé (et donc de ne pas valider) dans le HTML 4 Stricte ou XHTML 1 Strict, il fait partie de HTML depuis la 3.2, il est formellement partie de HTML5, et il fonctionne sur tous les navigateurs depuis Netscape 3.

J'ai vérifié ce comportement, comme le fait de travailler avec XHTML 1 Strict, XHTML 1 Transitoires, HTML 4 Stricte et en "mode quirks" sans DOCTYPE spécifié, et il fonctionne dans tous les cas à l'aide d'Internet Explorer 7.0.5730.13. Mon cas de test composé de deux fichiers, l'utilisation classique de l'ASP sous IIS 6; ils sont reproduits ici dans plein de sorte que vous pouvez vérifier ce comportement pour vous-même.

par défaut.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 n'importe quel navigateur qui n'a pas d'exécuter ces exemples correctement.
- Comme l'a souligné ci-dessous, la cible sur la forme peut ne pas fonctionner dans IE7—vous aurez envie de le tester.
- testé, et oui, il fonctionne très bien dans IE7. 🙂
- Le problème avec IE 7, c'est que si vous générer l'iframe à l'aide de javascript le nom de la balise n'est pas défini (même si vous essayez de le régler) pourquoi le poste cible échoue. La solution pour IE7: stackoverflow.com/questions/2181385/...
- Cela peut être fait avec différents sites? (SCRO)?
- Est-il un moyen d'enregistrer le contenu de l'image de sortie dans un fichier (par exemple, réponse du serveur à laquelle le formulaire a été soumis) ?
- C'est pas très clair ce que tu veux dire par "enregistrer un fichier". Ce que vous pourriez faire est de soumettre le formulaire à une IFRAME, et avez la réponse de définir un Contenu de l'en-tête de Disposition comme décrit dans la stackoverflow.com/questions/1012437/... - de sorte que l'utilisateur clique sur "soumettre", il l'envoie à un IFRAME, le navigateur reçoit la réponse et invite l'utilisateur à enregistrer le fichier sur leur ordinateur local. Est-ce que vous êtes après?
- permettez-moi de clarifier mon cas d'utilisation. J'ai été en mesure de remplir un iframe qui a été définie comme target attribut html <form>. Une fois que le formulaire a été posté et je peux voir le contenu dans la cible de l'iframe, je veux proposer à l'utilisateur une option pour enregistrer ce contenu dans un fichier. C'est ce que je voulais dire. Laissez-moi savoir si cela a besoin de plus de clarté.
InformationsquelleAutor Dylan Beattie

Un iframe est utilisé pour incorporer un autre document à l'intérieur d'une page html.

Si le formulaire doit être soumis à un iframe dans la page de formulaire, puis il peut être facilement réalisé à l'aide de l'attribut target de la balise.

Définir l'attribut target de la forme du 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>

Avancé iframe cible utilisez

Cette propriété peut également être utilisé pour produire de l'ajax comme expérience, surtout dans des cas comme d'upload de fichier, dans ce cas, où il devient obligatoire de soumettre le formulaire, afin de télécharger les fichiers

L'iframe peut être réglé pour une largeur et une hauteur de 0, et le formulaire peut être soumis à la cible fixée pour l'iframe, et un dialogue de chargement ouvert avant de soumettre le formulaire. Donc, il se moque d'un contrôle ajax, ainsi que le contrôle reste toujours sur le formulaire de saisie des jsp, avec le dialogue de chargement ouvert.

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>

InformationsquelleAutor kapil

Cette fonction crée une forme temporaire, puis envoyer les 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 le nom de l'attribut de la cible de l'iFrame, et des données est un objet JS :

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

InformationsquelleAutor Dr Fred

Si vous souhaitez modifier les entrées dans un iframe puis envoyer le formulaire à partir de cette iframe, ce faire

...
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 est de la même origine, mais vous pouvez commencer à Chrome dans un mode debug pour écarter la même la politique de l'origine et de le 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;
}

InformationsquelleAutor Dominique Fortin

Vous devez vous connecter pour publier un commentaire.