Question

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

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

谢谢！

编辑：人们说你不能分享来自iframe的数据，但是如果js导入全部在命名空间中，那么说NAMESPACE然后iframe会做类似的事情 NAMESPACE = parent.NAMESPACE

Answer 1

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

Answer 2

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

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

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

Answer 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 在您的库加载的上下文中与外部 HTMLDocument 中的 iframe 不同。虽然 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;
}

可以在iframe中共享javascript导入吗？

3 个答案: