Receiving a response from a remote server after loading a file in an iframe

Question

I have a form that uploads a file in firame to a remote server. As a result, upon presentation, the url server returns json data with the result of the operation that my iframe catches.

{'result': 'true' or 'false'} 

Now I would like to get this json as a callback to my iframe. I know that I need jsonp for this because it is a cross site. Here is my function with sample code from the IBM website :

 function fileUploadFunction(){ var fileUploadForm = $('#file_upload_form'); fileUploadForm.attr('action', uploadURL); fileUploadForm.submit(); $('#upload_target').load(function () { alert("IFrame loaded"); $.getJSON(uploadUrl+"&callback=?", function(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); }); }); }; 

But here there are several problems. At first - my uploadUrl - it's just "http: // something /". Do I need this to support calls with the suffix $callback= ?
Secondly, the server gives an answer only as a result of the file upload. So I need to get the result, which is stored in my iframe, and not at the specified url. How to solve this?

Here is the link. Pay attention to the hidden iframe inside the form. The result from the server appears.

http://ntt.vipserv.org/artifact/

---

EDIT

I have already tried:

  $('#upload_target').load(function () { var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML; var data = eval("("+ret+")"); }); 

But it causes a permission error.

Answer 1

This is easy to do with easyXDM , and there is actually a blog entry about this exact use case here .

In essence, this is that it uses cross-domain messages to transmit a response to the calling document.

Update: Here is the link for this in action, the source can be found on github , the files are prefixed with 'upload _'.

Answer 2

The Sean easyXDM recommendation is a great option (& should probably be marked as correct), but I wanted to offer another light-weighted solution that I did not see anyone.

In cases where you are sending to a hidden iframe in a different domain and you only need one response (rather than a two-way transmission), you could pass the message from the iframe to the parent using an overloaded URL . Here is an example:

• parent uploads iframe to another domain

• parent polls myframe.contentWindow.location.href (constantly getting Permission denied errors, because the frame is in a different domain)

• iframe processes then redirected to

   http://parentdomain.com/pagethatdoesnotexist?{'result':'ok'} 

• iframe gets 404, but now the location is accessible to the parent

• parent reads message from iframe url

Answer 3

one possible solution would be to set the iframe name with pure js. This name can be read from the parent wrapper page.

Answer 4

It seems to me that your code will ask uploadURL twice: first, .submit() execute a POST request to upload the file, and the result will be shown in the iframe as a web page; secondly .getJSON() executes a GET request, and the result is executed as javascript in <script> . You will understand this if you open Firebug when testing your application.

Since the two requests are independent, I do not know how .getJSON() will provide you with any information about the file that you just downloaded with .submit() .

For this kind of cross-domain communication, I would suggest using postMessage ; otherwise, you will need to change the application workflow to do everything in the iframe after downloading the file; e.g. do <script>alert('Submission accepted');</script> in an iframe.

What are you trying to do after the user has successfully uploaded the file?

Answer 5

Do not use .html () at all.

I used

 jQuery('.someElement') 

and it worked for me. you can save the result in a variable and insert it into a new element

eg

 var = jQuery('.someElement'); jQuery('.newElement').html(var);