Get the data from an iframe after form post has completed performing a file upload on target for

Question

I have a form which uses the target attribute to target an iframe when the form is posted which posts to a PHP script. This part is working fine but I need to do something based on several results that the php script will put in the iframe.

What I am thinking of doing is when the PHP script has finished posting it echo's out some hidden input fields that contain various elements, such as the state of the post, whether it succeeded and what the final result was if it was successfully posted.

However, if I did this it would put it into the iframe so then the main web page wouldn't be able to access the hidden input fields.

How would the main web page be able to access these hidden input fields so that the main web page can perform some action, Ie make a div within the web page show a specific error message or whatever.

The other thing is, once I know how I can get the data from the hidden input field, how would I know when I can go and get the values. I was thinking that when the form is posted via a JavaScript document.forms["myform"].submit() code I could then do a while loop and check to see if another hidden input field status is set to complete and once it says complete I can then get the values from the hidden input field.

I'm not sure if the way I suggested is the right way or doing what I want to achieve or if there is a better way of doing it.

UPDATE

I've tried what @lanzz suggested but it doesn't appear to have worked. Below is what I have tried.

$("iframe#image_upload_frame").on('load', function()
{
   var iframeBody = this.contentDocument.body;


   var data = $(iframeBody).find("#imageDirectory");
   alert("data: " + data);
});

Below is how the iframe is defined

<iframe id="image_upload_frame" name="image_upload_frame"></iframe>

and I am echoing out a hidden input field in the php script that's within the iframe.

echo '<input type="hidden" id="imageDirectory" value="'.$imageDirectory.'" />';

The echo is definetly working as when I see view the iframe source I can see the hidden input however, the alert dialog is never shown as if something isn't working. There are no errors being reported either by the google chrome dev console.

Answer 1

If I understand correctly - you need a value from the iframe in the parent window, once the value is loaded into the iframe. I would add javascript to the iframe calling the parent and executing a function.

In the main frame:

function incomingValue(val) {
   alert(val)
}

and somewhere in the generated iframe:

<script type="text/javascript">
 parent.incomingValue("Hello world");
</script>

This should work assuming both frame sources share the same domain.

Answer 2

You can use postMessage for cross document communication between an iframe and it's parent.

See:

http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes

http://javascript.info/tutorial/cross-window-messaging-with-postmessage

Answer 3

Since you're running on the same domain, your main page's Javascript will have no trouble to access the contents of the <iframe> (example uses jQuery, you could rewrite into whatever libs you plan to use):

$('iframe#the-id-of-the-iframe').on('load', function() {
    var iframeWin = this.contentWindow;
    var iframeBody = this.contentDocument.body;

    // access global JS vars defined in the iframe:
    var someIframeVariable = iframeWin.globalIframeVariable;

    // or, directly access elements in the iframe:
    var someIframeElement = $(iframeBody).find('#element-id-inside-iframe');
});

Answer 4

A while ago I wrote a piece of code to upload a picture using some javascript and two iframes. The most important thing for me was to preview the pic. Maybe it will help you:

HTML:

<div id='fakebutton' onclick='select_pic()'>Just a button to select a pic</div>
<iframe src='uploadform.php' name'pic_frame'></iframe>
<iframe src='#' name='target_frame'></iframe>

both the iframes are hidden. The targetframe has no source (or an empty page, if you want to).

uploadform.php contains a form:

<form id='upload_form' action='dosomething.php' method='post' enctype='multipart/form-data' target='target_frame' onsubmit=''>
<input id='realfoto' name='realfoto' type='file' onchange='parent.foto_upload(window.frameElement.id)'>
</form>

and then some javascript: First of all something to trigger the filebrowser when the user clicks the fake

function select_pic(){
   b=window.frames['pic_frame'];
   b.document.upload_form.realfoto.click();
   }

And then a part to actually upload the pic, triggered by the onchange() in the input element:

function foto_upload(o){
  var b=o;
  o=getElementById(o);
  if(o.contentDocument ) {o = o.contentDocument;}
  else if(o.contentWindow ){o = o.contentWindow;}
  else{return false;}
  if(test_pic(o,b)){ //test if it is really a pic
     getObj('foto_tmpdir').value=o.getElementById('tmp_dir').value;
     o.getElementById('doctype_nr').value=b;
     o.fotoform.submit();
     }
  else{
return false;}
}

In dosomething.php I perform actions on the uploaded pic (rename, resize etc). And it contains a few lines of javascript:

$a = 'upload was succes';
$b = 'my_image_name';
$c = 'whatever you want to put here';  
?>
  <script type="text/javascript">
  window.top.window.smurf(<?php echo "'$a','$b','$c'" ?>);</script>
  <?php

if you create in javascripty a function named smurf(a,b,c) you can pass along whatever you want form the php-script. One of the most important things for me was that I now can pass the filename of the uploaded pic to javascript, and use it to change an image.src for a preview. Hope you can use something of it.

Answer 5

Your iframe source page should has a javascript call function instead of the hidden field. The function will call the opener window (your main page) and then it do any functionality you want. As blue print look at the following:

//in iframe src.php

<?php
if ($something){
?>
<script>
function doSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doSomethingWithOpenerWindow()
</script>
<?php
}
else{
?>
<script>
function doAnotherSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doAnotherSomethingWithOpenerWindow()
</script>  

<?php
}
?>