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脚本有了这些信息，它就应该将它发送到Page A的脚本，然后运行该脚本并将文件名插入到页面中。

Answer 1

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

首先（在你的iframe中）创建一个新的iFrame，给它一个onload eventhandler，并在加载后调用该窗口上的postMessage方法。像这样的东西

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

修改：另请注意，如果您只想单向发送信息（并且每个iframe发送一次），则可以更轻松地使用网址http://receivingdomain.com/receivingPage.html?data=...打开iframe并在接收时页面读取自己的window.location来提取数据......

Answer 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

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

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

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

3 个答案: