使用嵌入 iframe 的父 HTML 页面中加载的 Javascript 库答案

【问题标题】：Use Javascript library loaded in parent HTML page in embedded iframe使用嵌入 iframe 的父 HTML 页面中加载的 Javascript 库
【发布时间】：2026-01-01 17:55:01
【问题描述】：

我的应用程序使用 ExtJS 库在 Javascript 中生成图表。不幸的是，据我从在线示例和文档中得知，ExtJS 不允许您在不重新加载页面的情况下生成新图表。

我的页面上会有很多图表，我想允许我的用户更改数据集的图表类型，而无需重新加载页面。到目前为止，我的解决方案是将每个图表制作在嵌入式 iframe 中，这样我就可以在新 iframe 中重新加载新类型的图表，而无需重新加载页面。

问题是，到目前为止，我不得不在每个 iframe 中分别加载 ExtJS 库，当您谈论 15 或 20 个 iframe 时，这会变得非常慢。我想要的是能够在我的 iframe 中使用 ExtJS 库，而不必为每个库加载库。当我使用“parent”来访问 ExtJS 函数时，它开始起作用，主要是因为 ExtJS 要求您将图表生成放在他们的 Ext.onReady() 函数中（调用 parent.Ext.onReady() 给出了一些非常奇怪的行为）。

对解决方案或变通办法有任何想法吗？我会使用另一个库，但我已经从一个更丑的、基于 Flash 的图表库迁移过来了，我真的很喜欢 ExtJS 的功能。谢谢。

【问题讨论】：

ExtJS 强制页面重新加载以生成新图表似乎不太可能。
相信我，我同意你的观点，但我仍然不能 100% 说服自己。但是在花了很多时间尝试各种解决方案之后，我无法在 onReady 函数之外生成新图表，也无法找到在 onReady 之外生成图表的示例（在 Sencha 的网站或其他地方）。我发现的主要解决方案是生成所有可能的图表并将它们放在卡片式布局中，但这对于我生成的图表数量来说非常慢。如果有人找到示例，请指点我，我很想看看它是如何完成的。
来自 Ext 支持团队成员的论坛发帖，回复其他人的问题：“您还没有 [your code] on onReady？onReady 之外只允许 Ext.define 语句，所有 Ext .create 和任何访问 DOM 的东西都必须在里面。”图表生成访问 DOM……不幸的是，该库非常适合图表。

标签： javascript iframe extjs charts

【解决方案1】：

在未来的某个地方，也许会延迟，重新加载您的store.load()。如果您使用 Direct，您也可以使用它自己的轮询调度程序。

【讨论】：

据我了解，store.load() 将允许我动态加载新数据集，但我需要动态生成具有相同数据集的新图表类型。