Cómo publicar datos en iframe con jQuery

Question

¿Cómo puedo publicar dinámicamente datos en un iframe en jQuery?

Realmente necesito publicar datos en un iframe en este caso, no puedo usar un poste $.

Si tiene una solución para hacer que JQuery maneje los datos devueltos por un $ .post 'cuando recibe los datos. ¡Soy muy curioso!

En el momento en que lo manejo se pone de esta manera:

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

Esto básicamente crea un iframe temporal y permite que el PHP inyecte JavaScript (usando ob_flush();flush(); ) Mientras devuelve datos, luego cuando está terminado, simplemente elimina el iframe para limpiar.

Desde dentro del iframe, accedo al marco principal con window.parent. Entonces los métodos de la mainframe.

Esto es ideal pero funciona con Get, ¿cómo puedo hacer que esto funcione con Post?

Answer 1

Ok, como aparentemente esto no existe, creé mi propia solución. Compartirlo aquí en caso de que alguien quiera publicar en un iframe en jQuery.

La función JS/ clase:

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

Luego, cuando necesite enviar un formulario a un iframe temporal:

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

Este es el archivo de ejemplo 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);
        }
}

Y el resultado es como se esperaba:

La consola del cuadro principal genera la cadena 'funciona ...' cada 350 ms que comienza de inmediato, incluso si el PHP todavía se está ejecutando.

Cuando el PHP está terminado de enviar los trozos, simplemente elimina el formulario temporal y el iframe temporal.

Answer 2

Esta función crea un formulario temporal, luego envía datos usando 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();
}

El objetivo es el ATTR 'Nombre' del Target iframe, y los datos son un objeto JS:

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

Answer 3

O puede usar el método de destino o usar AJAX para el trabajo anterior

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