如何使用postMessage发送数据跨域？ [英] How to Send Data Cross Domain using postMessage?

问题描述

我在其他网域的iFrame中有一个uploadify指令码。我试图发送文件上传 data 到嵌入iFrame的页面。

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

  $（'＃file_upload'）。uploadify（{
 // JS CODE 
'onUploadSuccess'：function（file，data，response）{
 data // data is what从iFrame传递到另一个网站上的脚本
} 
}）; 
  

data 是必须传递给

  var myframe，nestedFrame; 
 myFrame = $（'＃editorf'）。contents（）。find（'body'）; 
 nestedFrame = myFrame.find（'＃re_contentIframe'）。contents（）。find（'body'）; 
 nestedFrame.append（'data'）; //数据应该替换为来自iFrame的信息
  

我试过下面的代码： p>

iFrame代码 - 第B页

  $ （'#file_upload'）。uploadify（{
 // UPLOADIFY的JS代码
'onUploadSuccess'：function（file，data，response）{
 window.postMessage（'http：// iframe-domain.net/uploads/'+ data，'http：//iframe-domain.net'）; 
} 
}）; 
  

接收专页代码 - 页A

  $（function（）{
 window.addEventListener（'message'，receiver，false）; 
 
 e）{
 if（e.origin =='http://iframe-domain.net'）{
 var myframe，nestedFrame; 
 myFrame = $（'＃editorf'）。 contents（）。find（'body'）; 
 nestedFrame.append（e.data）; find（'body'）; 
 nestedFrame = myFrame.find（'＃re_contentIframe' ; 
} 
} 
}）; 
  

这不起作用。我收到此错误消息：

 错误：权限被拒绝访问属性'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脚本有这个信息

解决方案

我终于可以得到这个工作。

这是我做的。

首先我发现了一个插件，可帮助促进 window.postMessage 。

使用 postMessage plugin 我使用了以下代码：

iFrame JS代码 strong>

  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）{
 //将数据插入页面
}）; 
  

我的网页的完整代码：

  pm.bind（message，function（data）{
 var myframe，nestedFrame; 
 myFrame = $（'＃editorf'）。contents （'body'）; 
 nestedFrame = myFrame.find（'＃re_contentIframe'）。contents（）。find（'body'）; 
 nestedFrame.append（'data'）; 
 }）; 
  

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

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

Receiving Page Code - Page 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);
        }
    }
});

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 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.

这篇关于如何使用postMessage发送数据跨域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！