How to send data in iframe using jQuery

Question

How can I dynamically send data in an iframe in jQuery.

I really need to send data in an iframe in this case, I cannot use $ .POST because the received data is returned sequentially (buffered)

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

I am currently processing it using GETS as follows:

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 allows PHP to embed javascript into it (using ob_flush();flush(); ) until it returns data, and then when it finishes, it just removes the iframe for cleaning.

from iframe, I am window.parent. main frame using window.parent. , and then to mainframe methods.

this is perfect but works with GET, how can I do this work with POST?

Answer 1

Well, since this does not seem to exist, I created my own solution. Divide it here if someone wants a POST for iFrame in jQuery.

Js / class-like function:

 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 submit the form in a temporary iframe:

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

This is an example server.php 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 will be as expected:

the main frame console prints the line "Works ..." every 350 ms, starting immediately, even if php is still running.

When php finishes sending pieces, it just removes the temporary form and temporary iframe.

Answer 2

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

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

Answer 3

Either you can use the target method, or use AJAX to work above.

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