Comment publier des données sur iframe avec jQuery

Question

Comment puis-je publier dynamiquement des données sur un iframe dans jQuery.

J'ai vraiment besoin de publier des données sur un iframe dans ce cas, je ne peux pas utiliser un $ .post car les données reçues sont renvoyées séquentiellement (tamponnées)

Si vous avez une solution de contournement pour faire en sorte que les données de gérer JQuery soient renvoyées par un $ .post 'lorsqu'il reçoit les données. Je suis très curieux!

Pour le moment, je gère avec Get This Way:

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 laisse le php injecter JavaScript dedans (en utilisant ob_flush();flush(); ) Pendant qu'il renvoie des données, alors lorsqu'elle est terminée, elle supprime simplement l'iframe pour nettoyer.

De l'intérieur de l'IFRAME, j'accède au cadre principal avec window.parent. puis les méthodes du mainframe.

Ceci est idéal mais fonctionne avec GET, comment puis-je faire fonctionner cela avec Post?

Answer 1

OK, alors que cela n'existe apparemment pas, j'ai créé ma propre solution. Le partager ici au cas où quelqu'un voudrait publier sur un iframe dans jQuery.

La fonction JS / semblable à la 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();   });
    }
}

Ensuite, lorsque vous devez envoyer un formulaire à un iframe temporaire:

var dummy = new iframeform('server.php');
dummy.addParameter('type','test');
dummy.addParameter('message','Works...');
dummy.send();

Ceci est le fichier d'exemple 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 sortira la chaîne «fonctionne ...» toutes les 350 ms à démarrer 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.

Answer 2

Cette fonction crée un formulaire temporaire, puis envoyez 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();
}

La cible est l'attron 'name' de l'IFRAME Target, et les données sont un objet JS:

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

Answer 3

Soit vous pouvez utiliser la méthode cible ou 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>