Comment puis-je publier dynamiquement des données dans un iframe dans Jquery.
J'ai vraiment besoin de publier des données dans un Iframe dans ce cas, je ne peux pas utiliser un $ .POST car les données reçues sont retournées séquentiellement (tamponnées)
Si vous avez une solution de contournement pour que jquery gère les données renvoyées par un $ .POST 'lorsqu'il reçoit les données. Je suis très curieux!
Pour le moment, je le gère avec GETS de cette façon:
var iframe = $('<iframe style="display:none;"></iframe>');
$( "body" ).append(iframe);
iframe.attr('src','server.php?type=getFolders&inode='+nodeData.inode).load(function(){$(this).remove()});
Cela crée essentiellement un iframe temporaire et permet au php d'y injecter du javascript (en utilisant ob_flush();flush();
) pendant qu'il renvoie des données, puis quand il est terminé, il supprime simplement l'iframe à nettoyer.
depuis l'iframe, j'accède au cadre principal avec window.parent.
puis les méthodes du mainframe.
c'est idéal mais fonctionne avec GET, comment puis-je faire fonctionner cela avec POST?
Ok, donc comme cela n'existe apparemment pas, j'ai créé ma propre solution. Le partager ici au cas où quelqu'un voudrait POST à un iFrame dans jQuery.
la fonction js/de type classe:
function iframeform(url)
{
var object = this;
object.time = new Date().getTime();
object.form = $('<form action="'+url+'" target="iframe'+object.time+'" method="post" style="display:none;" id="form'+object.time+'" name="form'+object.time+'"></form>');
object.addParameter = function(parameter,value)
{
$("<input type='hidden' />")
.attr("name", parameter)
.attr("value", value)
.appendTo(object.form);
}
object.send = function()
{
var iframe = $('<iframe data-time="'+object.time+'" style="display:none;" id="iframe'+object.time+'"></iframe>');
$( "body" ).append(iframe);
$( "body" ).append(object.form);
object.form.submit();
iframe.load(function(){ $('#form'+$(this).data('time')).remove(); $(this).remove(); });
}
}
puis lorsque vous devez envoyer un formulaire à une iframe temporaire:
var dummy = new iframeform('server.php');
dummy.addParameter('type','test');
dummy.addParameter('message','Works...');
dummy.send();
Voici l'exemple de fichier server.php:
if($_POST[type] == 'test')
{
header( 'Content-type: text/html; charset=utf-8' );
echo '<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>';
echo str_pad('',4096); //fill browser buffer
for($i = 0; $i < 10; $i++)
{
echo '<script type="text/javascript">window.parent.console.log(\''.$_POST[message].'\');</script>';
ob_flush(); flush();
usleep(350000);
}
}
Et le résultat est comme prévu:
la console du cadre principal émet la chaîne 'Works ...' toutes les 350 ms en commençant immédiatement, même si le php est toujours en cours d'exécution.
Lorsque le php a fini d'envoyer les morceaux, il supprime simplement le formulaire temporaire et l'iframe temporaire.
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'}
Soit vous pouvez utiliser la méthode cible soit utiliser AJAX pour le travail ci-dessus
<form action="..." target="an_iframe" type="post">
<input type="text" name="cmd" placeholder="type a command here..." />
<input type="submit" value="Run!" />
</form>
<iframe id="an_iframe"></iframe>