jQuery模态对话框在iFrame中无法关闭

Question

我有一个带有iFrame的jQuery模态对话框，其中显示了一些内容。当用户在iFrame中选择选项时，我会进行Ajax调用，然后我想关闭我的对话框，但是对话框没有关闭。

在我的父表单上，我有一个div标签：

div id="structureDialog" title="Add Structure"

当用户点击父元素上的某个元素时，我会打开我的对话框：

// bind an onclick event onto tiles to display the modal dialogue window
$(".stationTile").bind('click', function () {
    var src = "<iframe src="myurl" />";
    var locationID = 1;
    $("#structureDialog").attr("locationID", locationID);
    $("#structureDialog").html(src);  //iframe
    $("#structureDialog").dialog({
        modal: true,               
    });    
});

在我的 iFrame 中，我有以下内容：

$(".userOption").bind('click', function () {
    $.ajax({
        async: false,
        type: "POST",
        url: "/NewStructure.aspx/Build",   
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: buildSuccess
    });
});

function buildSuccess(res, dest) {
    $("body", window.parent.document).attr("style", "background-color:yellow;");
    $("#structureDialog", window.parent.document).attr("style", "background-color:red;");
    $("#structureDialog", window.parent.document).dialog('close');
}

在我的buildSuccess函数中，我成功地将对话框的颜色改为了红色。但是，关闭函数无法关闭对话框。从目前为止我看到的大多数示例来看，这段代码应该没有问题，所以我很困惑。

- gdbj

Answer 1

如我在上面的评论中所写，解决方案与运行的jQuery实例相关。创建对话框对象时，它处于父表单的jQuery实例的上下文中。在iFrame中，会创建第二个jQuery实例，因此对话框框不在范围内。

调用$("#structureDialog", window.parent.document).dialog('close');使用本地jQuery实例搜索父级的DOM，因此由于未在那里初始化对话框框，因此无法在那里关闭。

解决方案是通过重排术语来引用父级的jQuery实例，如下所示： parent.$("#structureDialog").dialog('close'); 这首先将上下文指向父级，然后使用父级的jQuery实例查找对话框框并关闭它。

感谢chrismarx1在此帖子中指引我找到了这个解决方案。

- gdbj

---

这就是它！我已经搜索了几个小时了。 - Sonny

Answer 2

尝试

$("#structureDialog", window.opener.document).dialog('close');

- Rafay

---

window.opener为空。在此过程中只使用了一个窗口，所以我想这是有道理的。iFrame位于div标签中。此外，我认为问题不在于我的选择器，因为颜色更改成功发生。还有其他想法吗？ - gdbj

jQuery的上下文是否与此有关？不知道对话框对象是否随父级的jQuery实例一起加载到内存中，并且此方法是否使用iframe本地的jQuery实例访问对话框对象？但是，从我看过的其他示例来看，这不应该是这种情况，所以我不确定。 - gdbj

window.opener.document 会使用父级的 jQuery 实例，但如果是这种情况，背景色也不会改变。 - Rafay

我解决了...我的判断是正确的，问题与我使用的jquery实例有关。我必须使用以下语法引用jquery的父级实例：parent.$("#structureDialog").dialog('close'); - gdbj

@GregoryJohnson 很好，你可以将其发布为答案并接受它，以便将来可以帮助其他人。 - Rafay

3nigma：在从您建议的上下文（即：window.opener.document）搜索DOM时使用 $（“selector”，context）仍然使用jquery的本地实例（即iFrame中的实例），而不是父级的实例。只需要稍微重新排列一下术语！无论如何感谢您的努力！ - gdbj