如何使用postMessage发送数据跨域？

Question

我在iFrame中有一个uploadify脚本,该脚本在另一个域上.我正在尝试将文件上传发送data到嵌入了iFrame的页面.

我在iFrame(uploadify脚本)中有以下代码:

$('#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 必须传递给另一个域上的以下脚本:

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

我确实尝试了以下代码:

iFrame代码 - 第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');
        } 
    });

接收页码 - 页面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);
        }
    }
});

这不起作用.我收到此错误消息:

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)

uploadify脚本在文件上传时起作用,但似乎没有将数据传递给页面.我不相信这个错误是页面无法正常工作的原因.

我该怎么做呢？

编辑

为了更好地解释这里是一个例子:

一个人去了A页(主页).在页面A上,iFrame嵌入在该页面上.iFrame内部是一个uploadify脚本,允许用户上传文件.

一个人上传文件,uploadify脚本返回文件名.示例:528050f030522.jpg.一旦uploadify脚本具有此信息,它应该将其发送到页面A的脚本,该脚本然后运行并将文件名插入页面.

Answer 1

我终于能够让这个工作了。

这就是我所做的。

首先，我遇到了一个有助于促进window.postMessage.

对于postMessage 插件，我使用了以下代码：

iFrame JS 代码

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

带有 Uploadify 脚本的完整代码：

$(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 
         });
       } 
    });
}); 

接收窗口/父窗口JS代码

pm.bind("message", function(data) {
//Function to insert data onto 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'); 
});

这个插件有几个选项，大大简化了过程。