Question

我有一个表单，可以将文件中的文件上传到远程服务器。因此，提交url服务器会返回带有操作结果的json数据，这是我的iframe捕获的。

{'result': 'true' or 'false'}

现在我想将这个json作为我的iframe的回调来检索。我知道我需要jsonp来实现这一点，因为它是一个跨站点调用。这是我的函数，包含来自IBM' site的示例代码：

function fileUploadFunction(){     
    var fileUploadForm = $('#file_upload_form');
    fileUploadForm.attr('action', uploadURL);
    fileUploadForm.submit();
    $('#upload_target').load(function () {
        alert("IFrame loaded");
            $.getJSON(uploadUrl+"&callback=?", function(data) {
                alert("Symbol: " + data.symbol + ", Price: " + data.price);
            });
    });         
};

但这里出现的问题很少。首先 - 我的uploadUrl只是“http：// something /”。我是否需要它来支持$callback=后缀的来电？
其次 - 服务器仅在文件上传时给出响应。所以我需要获取存储在我的iframe中的结果，而不是指定的url。怎么解决这个问题？

这是链接。注意表单中隐藏的iframe。服务器的结果显示在那里。：

http://ntt.vipserv.org/artifact/

修改

我之前尝试过：

    $('#upload_target').load(function () {
        var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML;
        var data = eval("("+ret+")");
    });

但它引发了“拒绝权限”错误。

Answer 1

使用easyXDM可轻松完成此操作，实际上有一篇关于此确切用例的博文here。

实质上它的作用是使用跨域消息传递将响应中继到调用文档。

更新 Here is a link为了实现这一目标，可以在github找到来源，文件的前缀是“上传_”。

Answer 2

Sean的easyXDM建议是一个很好的选择（并且应该标记为正确），但我想建议另一个我没见过的轻量级解决方案。

如果您要在另一个域上发布隐藏的iframe，请执行以下操作：只需要一个回复（不是双向通信），您可以使用已破坏的URL 将消息从iframe传递给父级。这是一个例子：

父级在不同的域
父级民意调查myframe.contentWindow.location.href（由于该框架位于其他域名，因此不断出现Permission denied错误）

iframe进程，然后重定向到

http://parentdomain.com/pagethatdoesnotexist?{'result':'ok'}

iframe获得404但现在该位置可供父母
父级会从iframe的网址

Answer 3

一种可能的解决方案是使用纯js设置iframe的名称。可以从包装父页面读取此名称。

Answer 4

在我看来，您的代码会请求uploadURL两次：首先，.submit()执行POST请求以上传文件，结果会在iframe中显示为网页;第二，.getJSON()执行GET请求，结果在<script>中以javascript的形式执行。如果您在测试应用程序时打开Firebug，您就会意识到这一点。

由于其中两个请求是独立的，因此我不知道.getJSON()如何为您提供有关您刚刚使用.submit()上传的文件的任何信息。

对于这种跨域通信，我建议使用postMessage;否则，您需要更改应用程序工作流程，以便在文件上传后执行iframe中的所有操作;例如在iframe中执行<script>alert('Submission accepted');</script>。

用户成功上传文件后，您打算做什么？

Answer 5

根本不要使用.html（）。

我用过

jQuery('.someElement')

它对我有用。您可以将结果保存在变量中并将其插入新元素

e.g

var = jQuery('.someElement');
jQuery('.newElement').html(var);

在iframe中上传文件后从远程服务器检索响应

5 个答案: