So veröffentlichen Sie Daten mit JQuery auf Iframe

Question

Wie kann ich Daten dynamisch auf ein Iframe in JQuery veröffentlichen?

Ich muss in diesem Fall wirklich Daten auf einen Iframe veröffentlichen. Ich kann keinen $ .post verwenden, da die empfangenen Daten nacheinander zurückgegeben werden (gepuffert).

Wenn Sie eine Problemumgehung haben, damit JQuery -Daten von einem $ .post 'zurückgegeben werden, wenn es die Daten empfängt. Ich bin sehr neugierig!

Im Moment bekomme ich damit damit umher:

var iframe = $('<iframe style="display:none;"></iframe>');
$( "body" ).append(iframe);
iframe.attr('src','server.php?type=getFolders&inode='+nodeData.inode).load(function(){$(this).remove()});

Dies schafft im Grunde genommen ein temporäres Iframe und lässt den PHP JavaScript in sie injizieren (verwenden ob_flush();flush(); ) Während es Daten zurückgibt, wird der Iframe, wenn es fertig ist, einfach zum Aufräumen entfernt.

Aus dem Iframe greife ich auf den Hauptrahmen mit window.parent. dann die Methoden des Mainframe.

Das ist ideal, funktioniert aber mit Get. Wie kann ich diese Arbeit mit Post machen?

Answer 1

Ok, da dies anscheinend nicht existiert, habe ich meine eigene Lösung erstellt. Teilen Sie es hier, falls jemand einen Iframe in JQuery posten möchte.

Die JS-Funktion/ klassenähnlich:

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

Wenn Sie dann ein Formular an einen vorübergehenden Iframe senden müssen:

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

Dies ist die Beispieldatei von 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);
        }
}

Und das Ergebnis ist wie erwartet:

Die Konsole des Hauptrahmens gibt die Zeichenfolge 'funktioniert ...' alle 350 ms sofort beginnen, auch wenn der PHP noch ausgeführt wird.

Wenn der PHP fertig ist, um die Stücke zu senden, entfernt es einfach das temporäre Formular und das temporäre Iframe.

Answer 2

Diese Funktion erstellt ein temporäres Formular und sendet dann Daten mit 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();
}

Ziel ist der 'Name' Attr des Ziel -Iframe, und Daten sind ein JS -Objekt:

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

Answer 3

Entweder können Sie die Zielmethode verwenden oder AJAX für die obige Arbeit verwenden

<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>