How to post data to iframe with Jquery

Question

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 ?

Do you need to use an iframe? Can you not use AJAX or something like that instead? — Xymostech, Dec 03 '13 at 14:03
I explained in my question why I need to rely on an iframe and cannot use ajax the normal way, data returned is javascript and needs to be handled as soon as it arrives as page is returned in chunks. — Vincent Duprez, Dec 03 '13 at 14:06
Do you mean, you wanna load an iframe dynamically with the data returned from the request using POST ? — Bala, Dec 03 '13 at 14:15

score 30 · Answer 1 · edited Aug 16 '17 at 14:51

30

This function creates a temporary form, then send data using 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 is the 'name' attr of the target iFrame, and data is a JS object :

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

edited Aug 16 '17 at 14:51

Nathan Arthur

8,287
7
55
80

answered Aug 28 '14 at 09:27

Dr Fred

939
8
15

Thank you! This has managed to solve a completely different problem for me. I had content loading into an iFrame, but depending on how I loaded it the $(document).ready() either would not fire, or the "document" was the whole page document, not he iframe document. A variation of your code has made this work perfectly for me. I had to post some JSON which I am now putting into a TEXTAREA using your technique. – Jamie Carl Oct 15 '15 at 03:11

score 18 · Accepted Answer · edited May 01 '17 at 14:54

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.

great! add name attribute to iframe to make this work in current chrome (43.0.2357.81), cf. http://stackoverflow.com/a/7085607/899586 — Florian Glatz, Jun 01 '15 at 02:12

score 2 · Answer 3 · answered Dec 03 '13 at 14:04

2

Either you can use target method or use AJAX for the above work

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

answered Dec 03 '13 at 14:04

Sunil Verma

2,490
1
14
15

that is really not dynamic... and AJAX waits for the return to be complete before handling the data, I need to handle data when it returns, data returned is js only. – Vincent Duprez Dec 03 '13 at 14:05

How to post data to iframe with Jquery

3 Answers3

Linked