避免在iframe中重复使用Javascript

Question

这是一个线框，用于说明遗留项目的结构，显示一些性能问题：

对于所有对话框（来自jQuery UI），打开一个新的iframe，重新下载所有来自Home的js，并重新实例化所有对象。我可以从jQuery中创建从主页到所有新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：请记住，这是一个传统的架构，所有解决方案都必须考虑这种情况。

Answer 1

实际上，如果所有这些都托管在同一个地方，浏览器将不会多次下载文件。相反，它将缓存第一个结果，然后从缓存中拉出第二个结果。 iframe被视为一个单独的上下文，因此您无需担心变量或形式冲突。

假设两次下载同一个文件是您最关心的问题，那么您应该没问题。

另一种设计是使用AJAX而不是iframed内容 - 但是在使用遗留应用程序的地方，我意识到如果没有真正的JSON / REST调用可以做多么艰难。我做的一件事是将iframe中的视图更改为“partials”，仅返回不带HTML头等的必要HTML内容，并使用$ .load（）加载它们。这很复杂，因为您需要在加载后执行绑定并仔细跟踪表单ID等，但可以这样做。

Answer 2

我之前遇到过这种情况。一种方法是定义一些加载到iframe中的javascript，它只是重新路由对top.functionCall()的任何函数调用，而不是包含它们的实际定义。如果所有函数都在一个名称空间下，则变得非常简单，如下所示：

父窗口js：

var namespace = (function () { 
    // all of your functions are in here as properties of namespace
})();

iframe window js：

var namespace = top.namespace;

这个问题的一个问题是任何上下文敏感的函数（依赖或操作window对象的函数）很可能会破坏。