可以跨 iframe 共享 javascript 导入吗？答案

【问题标题】：Possible to share javascript imports across iframes?可以跨 iframe 共享 javascript 导入吗？
【发布时间】：2012-07-06 02:30:19
【问题描述】：

我有一个 web 应用程序，它有几个 iframe，都需要导入相同的 javascript 库（例如 jquery）。

有没有办法只加载一次并以某种方式在所有 iframe 之间共享该数据？我宁愿不要让我的页面加载缓慢，因为它会为每个 iframe 加载一次相同的 JS 文件。

谢谢！

编辑：人们说你不能从 iframe 共享数据，但是如果 js 导入都在一个命名空间中，比如 NAMESPACE，然后 iframe 会执行类似的操作 NAMESPACE = parent.NAMESPACE

【问题讨论】：

iframe 是独立的页面，它们不能“共享”数据，就像浏览器缓存一样。所以它应该缓存它，除非你使用带时间戳的QueryStrings。
那么文件将在缓存中[如果标题设置正确]，所以这不是慢问题。将其读入内存可能需要一些时间，但在现代浏览器中这不是问题。

标签： javascript iframe

【解决方案1】：

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

【讨论】：

我阅读了您的更新。我不会那样更新命名空间。我只会依靠浏览器来缓存这些文件。您还应该考虑使用类似 requirejs 的东西，这样您的模块只会加载一次。如果您觉得有用，请投票和/或标记答案。

【解决方案2】：

假设您 src 相同的 URI，并且您有健全的缓存控制标头，那么 JS 将被缓存并且不会为每一帧重新下载。

也就是说，如果你真的想要，你可以将它加载到顶部框架中，然后通过 parent 对象访问所有内容。

例如：http://dorward.me.uk/tmp/frames/top.html

【讨论】：

【解决方案3】：

某些环境会生成您无法控制的 iframe 网址。例如，在 CRM Dynamics 中，我也有同样的想法。我有常见的网络资源，但是当作为另一个资源的依赖项包含时，库最终会再次下载。我想让图书馆穿越一次，但那没有发生。

即使你设法让你的库像我最终那样加载一次，你也会在iframes 之间共享它时遇到问题。宿主对象和类型（例如类）是unique to the iframe。

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

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

如果您针对外国iframes 调用方法，希望您能看到问题。 HTMLDocument 在您的库加载的上下文中与外部iframe 中的HTMLDocument 不同。虽然isHTMLDocument 可以在本地环境中对document 起作用，但它在国外环境中不起作用。

与document 相同，许多库将document 烘焙到函数中，以避免要求您一次又一次地传递它。不幸的是，由于each environment being its own sandbox，主机环境污染的函数是effectively broken。

在iframe 文档等外部环境中使用时，只有纯函数才能工作。

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

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

【讨论】：