如何使用Jquery将数据发布到iframe [英] How to post data to iframe with Jquery

问题描述

如何在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？

解决方案

好吧，因为这显然doesn'不存在，我创造了我自己的解决方案。

js函数/类：

在这里共享它，以防有人想要在jQuery中发布到iFrame。

 函数iframeform（url）
 {
 var object = this; 
 object.time = new Date（）。getTime（）; 
 object.form = $（'< form action ='+ url +'target =iframe+ object.time +'method =poststyle =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）; //填充浏览器缓冲区
 
（$ i = 0; $ i <10; $ i ++）
 {
 echo'< script type =text / javascript > window.parent.console.log ';< /脚本>（\ '\' $ _ POST [消息]。'）'; 
 ob_flush（）;冲洗（）; 
 usleep（350000）; 
} 
} 
  

结果如预期：

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

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

How can I dynamically post data to an iframe in Jquery.

I really need to post data to an Iframe in this case, I cannot use a $.POST because data received is returned sequentially (buffered)

If you have a workaround to make jquery handle data returned by a $.POST 'when it receives the data. I'm very curious!

At the moment I handle it with GETS this way:

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

This basically creates a temporary iframe and lets the php inject javascript in it (using ob_flush();flush(); )while it is returning data, then when it's finished, it simply removes the iframe to clean up.

from within the iframe, I access the main frame with window.parent. then the mainframe's methods.

this is ideal but works with GET, how can I make this work with POST ?

解决方案

Ok, so as this apparently doesn't exist, I created my own solution. Sharing it here in case anybody wants to POST to an iFrame in jQuery.

the js function/ class-like:

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

then when you need to send a form to a temporary iframe :

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

This is the server.php example file :

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

And the result is as expected:

the main frame's console outputs the string 'Works...' every 350ms starting immediately, even if the php is still running.

When the php is finished sending the chunks, it simply removes the temporary form and the temporary iframe.

这篇关于如何使用Jquery将数据发布到iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！