如何使用 Jquery 将数据发布到 iframe

Question

如何在 Jquery 中将数据动态发布到 iframe。

在这种情况下，我确实需要将数据发布到 iframe，我不能使用 $.POST，因为接收到的数据是按顺序返回的（缓冲的）

如果您有一种解决方法可以让 jquery 在接收到数据时处理 $.POST ' 返回的数据。我很好奇！

目前我用GETS这样处理它：

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

这基本上创建了一个临时 iframe 并让 php 在返回数据时将 javascript 注入其中（使用 ob_flush();flush(); ），然后当它完成时，它只是删除 iframe 以进行清理。

在 iframe 中，我使用 window.parent. 访问主机，然后使用主机的方法。

这是理想的，但可以与 GET 一起使用，我怎样才能使它与 POST 一起使用？

Answer 1

您可以使用目标方法或使用 AJAX 进行上述工作

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

Answer 2

好的，因为这显然不存在，所以我创建了自己的解决方案。在这里分享它，以防有人想在 jQuery 中发布到 iFrame。

js函数/类：

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

那么当您需要将表单发送到临时 iframe 时：

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

这是 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);
        }
}

结果如预期：

主框架的控制台立即开始每 350 毫秒输出字符串 'Works...'，即使 php 仍在运行。

当 php 完成发送块时，它只是删除临时表单和临时 iframe。

Answer 3

这个函数创建一个临时表单，然后使用 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 是目标 iFrame 的 'name' attr，data 是一个 JS 对象：

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