Question

我已经实现了以下代码，用于在jQuery对话框中上传照片（使用iframe）。

以下是Iframe

<div style="display: none">
    <iframe id="upload-form" frameborder="0" marginheight="0" marginwidth="0" src="Upload.aspx"></iframe>
</div>

这是父页面上的jQuery代码，负责打开对话框。

$("#upload-image").click(function (e) {
    e.preventDefault();
    $('#upload-form').dialog({
        modal: true,
        width: 300,
        title: "Upload Image",
        autoOpen: true,
        close: function(event, ui) { $(this).dialog('close') }
    });
});

然后我在上传成功后注入脚本（在iframe页面上），将结果传递回父页面，但我想同时关闭对话框。

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    $(parent.document).find('#upload-form').dialog('close');
});

#imagePathValue成功通过，但我似乎无法关闭对话框。

有什么想法吗？

Answer 1

为了使其工作，您必须从父级调用jQuery，而不是从iframe调用。为此，请使用以下...

window.parent.jQuery('#upload-form').dialog('close');

应该这样做！

Answer 2

试试这个：

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    window.parent.$('#upload-form').dialog('close');
});

Answer 3

除此之外，您还应该这样做：

window.parent.$('#upload-form').remove();

所以在关闭对话框后删除Iframe实例。

所以最终的代码应该是：

$(document).ready(function () {
    $(parent.document).find('#imagePathValue').val('theimagevalue');
    window.parent.$('#upload-form').dialog('close');
    window.parent.$('#upload-form').remove();
});

由于 Kaushal

Answer 4

当然要记住要调用这些类型的函数，它必须引用父文档本身的函数。当你使用jquery构造函数的第二个参数时，你只是指定方法的目标，而不是指定它的执行位置。

这就是$('element', window.parent.document).method();不起作用的原因，window.parent.jQuery('element').method();会。

从Iframe关闭jQuery UI对话框

4 个答案: