Question

我尝试在iframe（fancybox）中提交图片，但是如果我关闭iframe，我就不会在服务器上获取数据。

（此代码在框架内）

<a class="button" id="finishButton" onclick="closeME()"><span>@PhotoPremier.Resources.Global.btnSubmit</span></a>

<script>
function closeME() {
    if (ValidationToSubmit() == true) {
        $('#FormToSubmit').submit();
    }
}

$('#FormToSubmit').submit(function() {
    event.preventDefault();
    parent.$.fancybox.close();
});
</script>

Answer 1

重点是你必须等到帖子成功结束，然后才能关闭iframe。

您是否能够编辑文件上传响应的服务器端？如果是，那么只需进行常规提交和回复打印：

<script>parent.$.fancybox.close();</script>

您还可以尝试通过jQuery.post提交表单，并在成功时关闭iframe，但这可能无法用于文件上传：

<a class="button" id="finishButton" onclick="submit()"><span>@PhotoPremier.Resources.Global.btnSubmit</span></a>

<script>
$('#FormToSubmit').submit(submit);

function submit() {
    if (!ValidationToSubmit()) {
        return;
    }
    var data = {
        x: $("#x").val(),
        y: $("#y").val(),
        ...
    };
    $.post({
        url:"...",
        data: data,
        success: function(){
            parent.$.fancybox.close();
        }
    })
}
</script>

不幸的是，你必须准备要发布的数据对象，但如果你有几个字段，那应该不是问题。

Answer 2

我的解决方法非常简单，有点创意。

我重定向到一个简单的页面（对我来说，创建一个共享页面[MVC]，用于所有情况），此页面获取新的URL并通过javascript重定向到新目标并关闭iframe。

<script type="text/javascript">
if("@ViewBag.Url" != "False")
{
    window.parent.location.href = "@ViewBag.Url";
}
parent.$.fancybox.close();
</script>

Fancybox iframe等待上传文件

2 个答案: