Comment publiez-vous sur un iframe?

StackOverflow https://stackoverflow.com/questions/168455

  •  03-07-2019
  •  | 
  •  

Question

Comment postez-vous les données sur une iframe?

Était-ce utile?

La solution

Dépend de ce que vous entendez par & "Publier des données &". Vous pouvez utiliser l'attribut HTML target="" sur une balise <form /> afin 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.

Internet Explorer contient un bogue connu qui se produit uniquement lorsque vous créez dynamiquement vos iframes, etc., à l'aide de Javascript (il existe un contourner ici ), mais si vous utilisez un balisage HTML ordinaire, tout va bien. L'attribut cible et les noms de cadre ne sont pas des astuces de ninja intelligents; Bien qu'il soit déconseillé (et donc ne valide pas) 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 & Quirks & "; sans DOCTYPE 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, utilisant ASP classique 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 d'un navigateur qui n'exécute pas correctement ces exemples.

Autres conseils

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

Si le formulaire doit être soumis à une iframe dans la page de formulaire, il peut être facilement obtenu à 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 de la cible iframe avancée
Cette propriété peut également être utilisée pour créer une expérience similaire à ajax, en particulier dans les cas tels que le téléchargement de fichiers, auquel cas il devient obligatoire de soumettre le formulaire pour pouvoir 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();
}

cible est le nom "nom" de l'iFrame cible et les données sont un objet JS: 

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

Si vous souhaitez modifier les entrées dans une iframe, soumettez le formulaire à partir de cette iframe, procédez ainsi 

...
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;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top