5

我在另一个域的 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 的脚本，然后该脚本运行并将文件名插入到页面中。

4

3 回答 3

1

在您的 iframe 中，您有window.postMessage(URL,sendingOrgin)，但这不是您将数据发送到另一个窗口的方式。如果我正确理解此页面，则改为使用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 的 iframehttp://receivingdomain.com/receivingPage.html?data=...并在接收页面上读取其自己的 window.location可能会容易得多提取数据...

于 2013-11-14T06:32:01.913 回答
0

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

这就是我所做的。

首先，我遇到了一个有助于促进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'); 
});

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

于 2013-11-23T03:54:21.107 回答
0

您可能正在尝试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

于 2013-11-19T17:20:57.637 回答