这是一个线框图，用于说明显示一些性能问题的遗留项目的结构：
对于所有对话框（来自 jQuery UI）打开一个新的 iframe 并重新下载来自 Home 的所有 js 并重新实例化所有对象。我可以从 jQuery 从 Home 创建一个对所有新 iframe 的引用并在每个 iframe隔离范围内工作吗？
例如：
[首页范围]
$("#some-el").data('foo', 'bar');
console.log($("#some-el").data('foo')); // results bar
[App1 范围]
//after defined in Home first run
console.log($("#some-el").data('foo')); // results undefined
PS：记住这是一个遗留架构，所有解决方案都必须考虑这种情况。
实际上，如果所有这些都托管在同一个地方，浏览器将不会多次下载文件。相反，它将缓存第一个结果，然后在第二个结果中从缓存中提取。iframe 被视为单独的上下文，因此您无需担心变量或表单冲突。
假设两次下载相同的文件是您的主要关注点，那么您应该没问题。
另一种设计是使用 AJAX 而不是 iframed 内容 - 但在您使用遗留应用程序的地方，我意识到如果没有真正的 JSON / REST 调用可用，这将是多么困难。我所做的一件事是将 iframe 中的视图更改为“部分”，只返回必要的 HTML 内容而不返回 HTML 头部等，并使用 $.load() 加载它们。这变得很复杂，因为您需要在加载后执行绑定并仔细跟踪表单 ID 等，但可以做到。
我以前遇到过这种情况。一种方法是定义一些加载到 iframe 中的 javascript，这些 javascript 只是将任何函数调用重新路由到top.functionCall()而不是包含它们的实际定义。如果您的所有函数都在一个命名空间下，这将变得非常简单，如下所示：
父窗口js：
var namespace = (function () {
// all of your functions are in here as properties of namespace
})();
iframe 窗口 js：
var namespace = top.namespace;
一个问题是任何上下文相关的函数（依赖或操作window对象的函数）很可能会中断。