Question

目前，当我希望向用户显示一个对话框，比如编辑一个从主窗口中选择的对象时，我创建了一个jQueryUI对话框，并在其中插入一个iframe到处理编辑的页面。

我发现这非常有效，因为对话框页面可以有自己的脚本，样式和元素ID。我不需要关心我的对话框和父页面之间可能出现的任何冲突。

我发现的唯一有点尴尬的部分是父窗口和子对话框之间的通信。不幸的是，孩子iframe通常需要知道它的父母。我发现这是必要的，所以它可以做一些事情，比如关闭它的对话框（位于父窗口中）或告诉父母在成功编辑后刷新它的项目列表。

理想情况下，孩子不会意识到它的父母，但是独立页面的好处，可以像任何其他页面一样进行测试而没有冲突，这似乎是值得的。

尽管如此，我还是经常阅读阻止iframe使用的评论。我不确定这是不是最佳做法，或者有些人只是不想使用它们。

我总是希望改善我做事的方式。如果将ajax用于此类事物确实是最佳实践，那么如何对非平凡的对话框进行操作？

我可以想象使用ajax为对话框请求标记并将其插入到对话框中，但我无法弄清楚如何管理复杂对话框合并的所有冲突，脚本，css，元素ID等带有现有页面。

有没有关于如何做到这一点的例子？或者当对话框不是很简单时，iframe真的更好吗？

感谢您的任何想法或帮助！

Answer 1

您可以做的一件事是使用命名空间模式，这样您的脚本就不会有任何冲突。

因此，您可以拥有一个名称空间对象，其中包含所有主页的脚本 MyApp.MainController

同样适合你的对话 MyApp.DialogController

至于确保你的jquery选择器没有碰撞（即只为对话框获取所有输入而不是整个页面的所有输入）是创建一个新的命名空间对象来包含你的主要对话框的脚本脚本然后传入您想要调用范围的dom上下文。这通常在构造控制器

时使用javascript MVC模式完成

var myDialogController = new MyApp.DialogController($("#my-dialog-container));

在命名空间对话框脚本中，您可以在创建脚本时使用委托并适当地对其进行范围化。

myScope.delegate("input", "change", function(e){...})

这表示“只绑定生活在'myScope'元素内的输入元素的事件。

最后，为了从对话框到主页面进行通信，您可以使用查询触发器并在范围内的对话框元素上触发自定义事件。

myScope.trigger("myDialog.hasTriggeredEvent", dataToSendToMainPage);

在主脚本中，您可以侦听触发的事件

("body").live("myDialog.hasTriggeredEvent", function(e) {
    //do logic here
}

Answer 2

我正在使用的一个内部网应用程序使用这种完全相同的模式从另一个页面调用维护页面，该页面与对话框中维护的实体有关联。

为什么它对我们来说是一个单独的页面的原因是因为它也可以直接打开，你可能正在维护这些实体的列表（而不是在上下文中打开时的一个实例）。

因此，这个带有iframe的diloag完全加载了另一页，对我们来说效果很好，特别是因为在内容页面中重复使用。

正如您所提到的，我们需要了解父母的一些内容，然后将这些内容作为查询字符串传递给iframe的src。

说了这么多，我不明白当内容通过ajax加载到作为对话框打开的div时会有什么样的冲突。您是否可以将所有id或css类选择器的上下文限制为dialog-div并避免与父页面发生任何冲突？

无论如何，我不知道如何评论这两者中哪一个是好的或首选的设计模式。