How to Send Data Cross Domain using postMessage?

问题:

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.

回答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...

回答2:

You're probably trying to postMessage to the same IFrame window from your window.In Page A, you're listening to window.addEventListener('message', receiver, false); Which means you have to send your data to this window. From the perspective of your IFRAME this Page A is the parent Window. So you're supposed to use the following in your Page B (the iframe page),

window**.parent**.postMessage('http://iframe-domain.net/uploads/' + data,'http://iframe-domain.net');

TL;DR: Just change window.postMessage to window.parent.postMessage

回答3:

I was finally able to get this working.

Here is what I did.

First I came across a plugin that helps facilitates the window.postMessage.

With the postMessage plugin I used the following code:

iFrame JS Code

var fileUploaded = data;
 pm({
     target: window.parent,
     type: "message5", 
     data:fileUploaded 
});

Full code with Uploadify Script:

$(function() {
    $('#file_upload').uploadify({
        'swf'      : 'uploadify.swf',
        'uploader' : '/js/uploadify/uploadify.php',
        'onUploadSuccess' : function(file, data, response) {
            var fileUploaded = data;
            pm({
              target: window.parent,
              type: "message", 
              data:fileUploaded 
         });
       } 
    });
}); 

Receiving Window/Parent Window JS Code

pm.bind("message", function(data) {
//Function to insert data onto page
});

Full Code for my Page:

pm.bind("message", function(data) {
  var myframe, nestedFrame;
  myFrame = $('#editorf').contents().find('body');
  nestedFrame = myFrame.find('#re_contentIframe').contents().find('body');
  nestedFrame.append('data'); 
});

This plugin has several options and simplified the process greatly.