jqueryui：关闭嵌套的iframe模式对话框_Jquery_Iframe_Dialog_Nested

jqueryui：关闭嵌套的iframe模式对话框

jquery iframe

jqueryui：关闭嵌套的iframe模式对话框,jquery,iframe,dialog,nested,Jquery,Iframe,Dialog,Nested,我有一个行为不端的UI结构，我想知道添加一些眼睛是否可以帮助我看到我缺少的东西，或者，如果没有，是否可以帮助我找到解决方法我有一个页面，加载一个jQueryUI模式对话框，其中包含一个iframe。该iframe加载一个页面，该页面可以打开包含另一iframe的另一个模式。该嵌套iframe包含一个带有按钮的页面，该按钮应关闭当前模式。但是，该按钮不起作用。这里是布局的概念模型（注意每个iframe都包含在一个modal div中）：请注意，这是概念性的，而不是DOM的实际布局方式。另外，实

我有一个行为不端的UI结构，我想知道添加一些眼睛是否可以帮助我看到我缺少的东西，或者，如果没有，是否可以帮助我找到解决方法

我有一个页面，加载一个jQueryUI模式对话框，其中包含一个iframe。该iframe加载一个页面，该页面可以打开包含另一iframe的另一个模式。该嵌套iframe包含一个带有按钮的页面，该按钮应关闭当前模式。但是，该按钮不起作用。这里是布局的概念模型（注意每个iframe都包含在一个modal div中）：

请注意，这是概念性的，而不是DOM的实际布局方式。另外，实际上在第2页有一个按钮关闭iframe1，它可以工作。但是，在page3和iframe2之间尝试相同的函数失败。它能够找到对话框div，但它给了我“初始化之前无法在对话框上调用方法；试图调用方法‘close’”jqueryui错误

下面是一些可能会有所帮助的附加说明：由于每个对话框的appendTo属性，每个模态div（无论嵌套级别如何）都会附加到主顶级主体元素。通过对话框功能添加按钮（例如示例中显示的“X”按钮）可以工作。很明显，有一个隐藏的钩子可以很好地工作。根据其他答案，每个iframe已经在调用jQuery的父实例来尝试关闭它们的包含对话框。添加任意数量的.parent来说明嵌套级别的增加并没有解决这个问题

以下是我的示例应用程序的全文：第1页


函数make1（）{
var self=$（“”）；
变量帧=$（“”）；
html（frame）；
自我对话({
标题:"一",，
自动打开：错误，
莫代尔：是的，
附录：$（window.document）.find（'body'），
宽度：300，
身高：200，
叠加：0.5，
关闭：函数（）{
self.dialog（'destroy'）；
}
});
self.dialog（“打开”）；
frame.attr（“src”http://localhost:81/page2.html");
}
开放1

第2页：

<html>
<head>
<link rel="stylesheet" href="jquery-ui.min.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">

    var dialog;

    function make2() {
        var self = $("<div id='two'></div>");
        dialog = self;
        var frame = $("<iframe style='width:100%;height:100%' />");
        self.html(frame);
        self.dialog({
            title: 'Two',
            autoOpen: false,
            modal: true,
            appendTo: $(window.parent.document).find('body'),
            width: 300,
            height: 200,
            overlay: 0.5,
            close: function() {
                self.dialog('destroy');
            }
        });
        self.dialog('open');
        frame.attr("src", "http://localhost:81/page3.html");
    }

    function kill1() {
        window.parent.$("#one").dialog('close');
    }


</script>
</head>
<body>
<button onclick="make2()">Open 2</button>
<button onclick="kill1()">Kill 1</button>
</body>
</html>


var对话框；
函数make2（）{
var self=$（“”）；
对话=自我；
变量帧=$（“”）；
html（frame）；
自我对话({
标题:"两个",，
自动打开：错误，
莫代尔：是的，
附录：$（window.parent.document）.find（'body'），
宽度：300，
身高：200，
叠加：0.5，
关闭：函数（）{
self.dialog（'destroy'）；
}
});
self.dialog（“打开”）；
frame.attr（“src”http://localhost:81/page3.html");
}
函数kill1（）{
window.parent.$（“#one”）.dialog（'close'）；
}
开放2
杀死1

…和第3页，问题页：

<html>
<head>
<link rel="stylesheet" href="jquery-ui.min.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">

    function kill2() {
        var dialog = window.parent.$("#two")
        if(dialog.length > 0) {
            alert("found it; closing dialog...");
            dialog.dialog('close');
        }
    }


</script>
</head>
<body>
<button onclick="kill2()">Kill 2</button>
</body>
</html>


函数kill2（）{
var dialog=window.parent.$（“#2”）
如果（dialog.length>0）{
警报（“找到它；关闭对话框…”）；
dialog.dialog（'close'）；
}
}
杀死2个

最后一个“Kill 2”按钮失败并出现错误

这不是答案，而是解决办法。简单地说，只需删除对话框中创建的所有积垢我必须强调，这在很大程度上是最后的手段，即使这样，也不是每个人都能做到的。这取决于浏览器和jQueryUI版本之间可能存在差异的几个实现细节。但是，如果您处于客户端浏览器版本锁定的场景中，那么这至少应该值得研究

function kill2() {
    var dialog = window.parent.$("[aria-describedby='two']")
    if(dialog.length > 0) {     
        var zIndex = dialog.css("z-index") -1;
        var overlay;
        dialog.siblings(".ui-widget-overlay.ui-front").each(function(index, item) {
            if($(item).css("z-index") == zIndex)
                overlay = item;
        });
        if(overlay) {
            $(overlay).remove();
        }
        dialog.remove();
    }
}

本质上，它定位对话框的父元素（同样，通过它的实现细节向其添加aria desribeby属性），然后搜索该元素的兄弟元素以查找覆盖（如果提供了modal:true，则该元素将在那里。否则，它将不存在）。对于任意数量的嵌套对话框，可以通过查找比对话框索引小一个的z索引来找到适当的覆盖。然后，它将删除覆盖和对话框

一个关键的注意事项是，这显然绕过了提供给对话框的close:方法中的任何逻辑。如果希望执行该方法，则必须在此方法中重新创建该逻辑

<html>
<head>
<link rel="stylesheet" href="jquery-ui.min.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">

    function kill2() {
        var dialog = window.parent.$("#two")
        if(dialog.length > 0) {
            alert("found it; closing dialog...");
            dialog.dialog('close');
        }
    }


</script>
</head>
<body>
<button onclick="kill2()">Kill 2</button>
</body>
</html>

function kill2() {
    var dialog = window.parent.$("[aria-describedby='two']")
    if(dialog.length > 0) {     
        var zIndex = dialog.css("z-index") -1;
        var overlay;
        dialog.siblings(".ui-widget-overlay.ui-front").each(function(index, item) {
            if($(item).css("z-index") == zIndex)
                overlay = item;
        });
        if(overlay) {
            $(overlay).remove();
        }
        dialog.remove();
    }
}