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 ?

javascript php jquery html iframe

shareimprove this question

asked Dec 3 '13 at 13:59

Vincent Duprez

1,86132250

Do you need to use an iframe? Can you not use AJAX or something like that instead? – Xymostech Dec 3 '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 3 '13 at 14:06

Do you mean, you wanna load an iframe dynamically with the data returned from the request using POST ? – Bala.C Dec 3 '13 at 14:15

No I want to dynamically load an iframe with post data – Vincent Duprez Dec 3 '13 at 14:20

The term you're looking for is "long polling" – Izkata Dec 3 '13 at 15:32

add a comment

3 Answers

active oldest votes

up vote

23

down vote

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

shareimprove this answer

edited Aug 16 '17 at 14:51

Nathan Arthur

2,54722041

answered Aug 28 '14 at 9:27

Dr Fred

40937

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 3:11

add a comment

up vote

12

down vote

accepted

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.

shareimprove this answer

edited May 1 '17 at 14:54

SexyBeast

2,0911866141

answered Dec 3 '13 at 15:12

Vincent Duprez

1,86132250

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

sorry only saw this now, edited the code.. – Vincent Duprez Jul 15 '15 at 20:40

add a comment

up vote

1

down vote

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>

shareimprove this answer

answered Dec 3 '13 at 14:04

Sunil Verma

2,3071713

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 3 '13 at 14:05