How to Send Data Cross Domain using postMessage?

Question

I have an uploadify script in an iFrame which is on another domain. I am attempting to send the file upload data to the page on which the iFrame is embedded on.

I have the following code in a iFrame (uploadify script):

$('#file_upload').uploadify({
   //JS CODE
   'onUploadSuccess' : function(file, data, response) {
      data //data is what must be passed from the iFrame to the script on another site 
   } 
});

data is what must be passed to the following script on another domain:

var myframe, nestedFrame;
myFrame = $('#editorf').contents().find('body');
nestedFrame = myFrame.find('#re_contentIframe').contents().find('body');
nestedFrame.append('data'); //data should be replaced with the information from the iFrame

I did attempt the following code:

iFrame Code - Page B

$('#file_upload').uploadify({
   //JS CODE for UPLOADIFY
'onUploadSuccess' : function(file, data, response) {
    window.postMessage('http://iframe-domain.net/uploads/' + data,'http://iframe-domain.net');
        } 
    });

Receiving Page Code - Page A

$(function() {
    window.addEventListener('message', receiver, false);

    function receiver(e){
        if (e.origin == 'http://iframe-domain.net'){
            var myframe, nestedFrame;
            myFrame = $('#editorf').contents().find('body');
            nestedFrame = myFrame.find('#re_contentIframe').contents().find('body');
            nestedFrame.append(e.data);
        }
    }
});

This doesn't work. I do receive this error message:

Error: Permission denied to access property 'toString'
...a);if(Z){var Y=0;(function(){if(typeof Z.GetVariable!=D){var ab=Z.GetVariable("$...

jquery.uploadify.js (line 17)

The uploadify Script does work as the file is uploaded but it doesn't appear to pass the data to the page. I am not convinced this error is the reason the page isn't working.

How do I do this?

EDIT

To better explain here is an example:

A person goes to Page A (the main page). On Page A an iFrame is embedded on that page. Inside the iFrame is an uploadify script to allow users to upload a file.

A person uploads a file the uploadify script returns the file name. Example: 528050f030522.jpg. Once the uploadify script has this information it should send it to Page A's script which then runs and inserts the file name into the page.

Answer 1

In your iframe, you have window.postMessage(URL,sendingOrgin), but that's not how you send data to another window. If I understand this page correctly, you instead use otherwindow.postMessage(data,receivingOrigin).

So first (within your iframe) create a new iFrame, give it an onload eventhandler, and call the postMessage method on that window once it's loaded. Something like this

var iframe=document.createElement("iframe");
iframe.onload=function(){
    iframe.contentWindow.postMessage(data,"http://receivingdomain.com");
}
iframe.src="http://receivingdomain.com/receivingPage.html"

Edit: Also, note that if you just want to send information one-way (and one-time per iframe), it may be much easier to just open an iframe with the URL http://receivingdomain.com/receivingPage.html?data=... and on the receiving page read its own window.location to extract the data...