跨iframe共享JavaScript导入是否可行？

Question

我有一个Web应用程序，其中包含多个iframes都需要引入相同的JavaScript库（例如jquery）。

有没有一种方法只加载一次并在所有iframes之间共享这些数据？我不想因为为每个iframe加载相同的JS文件而使页面加载缓慢。

谢谢！

编辑：有人说无法从iframe中共享数据，但是如果js导入都在一个名称空间中，比如NAMESPACE，那么iframe可以执行类似于NAMESPACE = parent.NAMESPACE的操作。

- asutherland

---

iframes是独立的页面，它们不能像浏览器缓存一样“共享”数据。因此，除非您使用时间戳查询字符串，否则它应该会缓存它。 - TheZ

文件如果设置正确的头部信息，会被缓存起来。所以这并不会影响速度。读取到内存中可能需要一些时间，但在现代浏览器中也不是问题。 - epascarello

Answer 1

如果所有框架都加载相同的js文件，现代浏览器（chrome、firefox、IE）应该从缓存中简单地加载相同的文件...这样你就不必一遍又一遍地重新加载同一个文件。如果您的页面加载时间很长，请考虑压缩您的javascript（通过使用另一个程序使您的js文件更小）...这可以大大减少加载时间。

- vinnybad

---

我看到了你的更新。我不会像那样更新命名空间。我只会依赖浏览器缓存这些文件。你也应该考虑使用类似requirejs的东西，这样你的模块只会被加载一次。如果您觉得有用，请点赞和/或标记答案。 - vinnybad

Answer 2

假设您的src URI 相同，并且您具有合理的缓存控制头，则 JS 将被缓存，不会为每个帧重新下载。但是，如果您真的想这样做，您可以在顶层框架中加载它，然后通过 parent 对象访问所有内容。例如：http://dorward.me.uk/tmp/frames/top.html。

- Quentin

Answer 3

某些环境会生成您无法控制的 iframe URL。例如，在 CRM Dynamics 中，我有同样的想法。我有一些常见的网页资源，但是当作为另一个资源的依赖项包含时，库最终结果是再次下载。我希望库只通过网络传输一次，但这并没有发生。

即使您像我最终做到的那样管理了您的库的加载，您在跨 iframes 共享它时也会遇到问题。主机对象和类型（例如类）是 唯一的iframe。

function isHTMLDocument(el){ //impure
  return el instanceof HTMLDocument;
}

function dropdown(values){ //impure
   const el = document.createElement("select");
   ...
   return el;
}

如果你在外部iframe中调用方法，希望你能看到问题。在加载库的上下文中，HTMLDocument与外部iframe中的HTMLDocument不同。虽然isHTMLDocument可以在本地环境中的document上工作，但在外部环境中却无法工作。

同样，document也是如此，许多库将document嵌入函数中，以避免您再次传递它。不幸的是，由于每个环境都是自己的沙盒, 主机环境受污染的函数实际上已经失效。

只有纯函数才能在外部环境（如iframe文档）中使用。

function is(el, type){ //pure
  return el instanceof type;
}

function dropdown(document, values){ //pure
   const el = document.createElement("select");
   ...
   return el;
}

- Mario