Como postar dados no iframe com jQuery

Question

Como posso postar dinamicamente dados em um iframe no jQuery.

Eu realmente preciso postar dados em um iframe neste caso, não posso usar um $ .post porque os dados recebidos são retornados sequencialmente (buffer)

Se você tiver uma solução alternativa para fazer com que os dados do manipulação do jQuery retornem por um $ .Post 'quando receber os dados. Sou muito curioso!

No momento em que lidar com isso, fica desta maneira:

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

Isso basicamente cria um iframe temporário e permite que o PHP injete JavaScript nele (usando ob_flush();flush(); ) Enquanto está retornando dados, quando terminar, ele simplesmente remove o iframe para limpar.

De dentro do iframe, eu acesso o quadro principal com window.parent. Então os métodos do mainframe.

Isso é ideal, mas funciona com o get, como posso fazer isso funcionar com o post?

Answer 1

Ok, então, como isso aparentemente não existe, criei minha própria solução. Compartilhando aqui caso alguém queira postar em um iframe no jQuery.

A função JS/ 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();   });
    }
}

Então, quando você precisa enviar um formulário para um iframe temporário:

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

Este é o arquivo de exemplo 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);
        }
}

E o resultado é o esperado:

O console do quadro principal produz a string 'funciona ...' a cada 350ms começando imediatamente, mesmo que o PHP ainda esteja em execução.

Quando o PHP terminar de enviar os pedaços, ele simplesmente remove a forma temporária e o iframe temporário.

Answer 2

Esta função cria um formulário temporário e envie dados 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();
}

Target é o ator de 'nome' do Iframe de destino, e os dados são um objeto JS:

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

Answer 3

Você pode usar o método de destino ou usar o ajax para o trabalho acima

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