Wie kann ich Daten dynamisch in einem Iframe in Jquery veröffentlichen?

In diesem Fall muss ich wirklich Daten an einen Iframe senden. Ich kann kein $ .POST verwenden, da die empfangenen Daten nacheinander zurückgegeben werden (gepuffert).

Wenn Sie eine Problemumgehung haben, damit jquery Daten verarbeitet, die von $ .POST 'zurückgegeben werden, wenn die Daten empfangen werden. Ich bin sehr neugierig!

Im Moment gehe ich mit GETS folgendermaßen damit um:

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 erstellt im Grunde genommen einen temporären Iframe und lässt das PHP Javascript (mit ob_flush();flush();) einfügen, während es Daten zurückgibt. Wenn es fertig ist, entfernt es einfach den Iframe, um ihn zu bereinigen.

Innerhalb des Iframes greife ich mit window.parent. und dann auf die Methoden des Mainframes auf den Mainframe zu.

Dies ist ideal, funktioniert aber mit GET. Wie kann ich diese Funktion mit POST ausführen?

12
Vincent Duprez 3 Dez. 2013 im 17:59

3 Antworten

Beste Antwort

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

Die js Funktion / klassenartig:

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 temporären Iframe senden müssen:

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

Dies ist die Beispieldatei 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 alle 350 ms die Zeichenfolge 'Works ...' aus und beginnt sofort, auch wenn das PHP noch läuft.

Wenn der PHP mit dem Senden der Chunks fertig ist, werden einfach das temporäre Formular und der temporäre Iframe entfernt.

16
SexyBeast 1 Mai 2017 im 14:54

Sie können entweder die Zielmethode oder AJAX für die oben genannte 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>
2
Sunil Verma 3 Dez. 2013 im 14:04

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'-Attribut des Ziel-iFrames, und Daten sind ein JS-Objekt:

data={last_name:'Smith',first_name:'John'}
29
Nathan Arthur 16 Aug. 2017 im 14:51