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('/' + data,'');
        } 
    });

Receiving Page Code - Page A

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

    function receiver(e){
        if (e.origin == ''){
            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.

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/uploads/' + data,'http://iframe-domain');
        } 
    });

Receiving Page Code - Page A

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

    function receiver(e){
        if (e.origin == 'http://iframe-domain'){
            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.

• javascript
• jquery
• iframe
• cross-domain
• uploadify

• Can you show an example of the data you are passing trough the postmessage? – Kristof Degrave Commented Nov 13, 2013 at 13:43
• easy: just use top.postMessage instead of window.postMessage – dandavis Commented Nov 14, 2013 at 20:39
• @KristofDegrave - Read my edit. I provided an example. – L84 Commented Nov 16, 2013 at 19:10
• @dandavis - Didn't work. =< – L84 Commented Nov 16, 2013 at 19:11
• I reread your setup, because initially I thought there were 3 domains involved, but it seems you just want to send data from the iframe back to the parent page. In this dandavis is correct, that you should use window.top.postMessage or window.parent.postMessage instead of window.postMessage. However, your problem seems to be elsewhere... I think this snippet is the problem nestedFrame.append('data');. Honestly, it's just a bit hard to figure out the description of what's happening where in the question... – Fabio Beltramini Commented Nov 16, 2013 at 19:52

3 Answers 3

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.");
}
iframe.src="http://receivingdomain./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./receivingPage.html?data=... and on the receiving page read its own window.location to extract the data...

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/uploads/' + data,'http://iframe-domain');

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

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.