IFrame 与 Ajax 的对话？

Question

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

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

我发现的唯一有点尴尬的部分是父窗口和子对话框之间的通信。不幸的是，子 iframe 通常需要了解其父级。我发现这是必要的，因此它可以执行诸如关闭其对话框（位于父窗口中）或告诉父级在成功编辑后刷新其项目列表等操作。

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

不过，我经常读到 cmets 不鼓励使用 iframe。我不确定这是否真的不是最佳实践，或者有些人只是不想使用它们。

不过，我一直在寻求改进我做事的方式。如果对这类事情使用 ajax 确实是最佳实践，那么对于一个非平凡的对话框，它是如何完成的？

我可以想象使用 ajax 请求对话框的标记并将其插入对话框，但我不知道如何管理所有冲突、脚本、css、元素 ID 等以进行复杂的对话框合并带有现有页面。

是否有任何示例说明应该如何做到这一点？或者当您的对话框不是很简单时，iframe 真的更好吗？

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

Answer 1

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

虽然它对我们来说是一个单独的页面，但它也可以直接打开，您可能会在其中维护此类实体的列表（而不是在上下文中打开的一个实例）。

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

正如你提到的，我们需要从父级知道一些事情，我们将这些作为查询字符串传递给 iframe 的 src。

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

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

Answer 2

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

因此，您可以拥有一个命名空间对象，其中包含您所有主页的脚本，例如 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
}