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, I.e. 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