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

【问题标题】：How to Send Data Cross Domain using postMessage?如何使用 postMessage 跨域发送数据？
【发布时间】：2013-11-22 18:55:59
【问题描述】：

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

我在 iFrame（上传脚本）中有以下代码：

$('#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 的脚本，然后该脚本运行并将文件名插入到页面中。

【问题讨论】：

您能否举例说明您通过 postmessage 传递的数据？
简单：只需使用 top.postMessage 而不是 window.postMessage
@KristofDegrave - 阅读我的编辑。我提供了一个例子。
@dandavis - 没用。 =
我重新阅读了您的设置，因为最初我认为涉及 3 个域，但您似乎只想将数据从 iframe 发送回父页面。在这个 dandavis 中是正确的，您应该使用 window.top.postMessage 或 window.parent.postMessage 而不是 window.postMessage。但是，您的问题似乎在其他地方......我认为这个 sn-p 是问题nestedFrame.append('data');。老实说，要弄清楚问题中发生的事情的描述有点困难......

标签： javascript jquery iframe cross-domain uploadify

【解决方案1】：

在您的 iframe 中，您有 window.postMessage(URL,sendingOrgin)，但这不是您将数据发送到另一个窗口的方式。如果我对this page 的理解正确，您可以改用otherwindow.postMessage(data,receivingOrigin)。

首先（在您的 iframe 中）创建一个新 iFrame，为其提供 onload 事件处理程序，并在加载后在该窗口上调用 postMessage 方法。像这样的

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

编辑：另外，请注意，如果您只想单向发送信息（并且每个 iframe 一次），只需打开带有 URL http://receivingdomain.com/receivingPage.html?data=... 的 iframe 并在接收页面上阅读可能会容易得多它自己的 window.location 来提取数据...

【讨论】：

如果您使用的是带有开发工具（Chrome、firefox 和 firebug 等）的浏览器，您应该调试不起作用的部分：1）您的第二个内部 iframe 是否已创建，2）它是否有正确的 URL，3) 网络请求是否返回了您创建的正确内容，4) 是否向控制台添加了任何安全违规行为，5) 在接收 iframe 内的源选项卡中放置断点并查看消息是否已收到以及 JS 正在用它做什么
另外，您的接收 iframe 可能尚未准备好接收消息。检查此问题的答案以获得解决方法：stackoverflow.com/questions/6753392/…

【解决方案2】：

您可能正尝试将postMessage 从您的窗口发送到同一个IFrame 窗口。在页面A 中，您正在收听window.addEventListener('message', receiver, false);，这意味着您必须将数据发送到此窗口。从您的 IFRAME 的角度来看，此页面 A 是父窗口。所以你应该在你的页面 B（iframe 页面）中使用以下内容，

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

TL;DR：只需将 window.postMessage 更改为 window.parent.postMessage

【讨论】：

【解决方案3】：

我终于能够得到这个工作。

这就是我所做的。

首先我came across a plugin 有助于促进window.postMessage。

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

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'); 
});

这个插件有多种选择，大大简化了流程。

【讨论】：