将 HTML+javascript 页面移动到 iFrame

Question

我有一个由单个页面组成的现有网站（每个页面都是一个不同的工具，需要一些用户输入（即表单），每个页面都有自己的一组 javascript 函数来填充该页面上的下拉列表等）。每个工具都可以从主 index.html 访问。

我希望每个工具都显示在 iFrame 中，而不是显示在主页上，而不是每个工具都是从 index.html 调用的自己的“独立”页面。这样主页面保持静态，而只使用用户选择的任何工具更新 iframe。所以说在主索引页面上，我有一个 3 个工具菜单（收集日志、收集 KPI、收集状态）以及一个 iFrame。例如，如果用户选择收集日志，则包含“收集日志”的菜单会保留在那里，但 iFrame 中会显示“收集日志”页面。

我的问题是所有 HTML 内容都可以正常工作，但是所选工具页面中的任何 javascript 代码都不起作用（即，没有任何下拉菜单被填充，因为它是页面中的 javascript 代码通过读取文件来实现的在服务器上）。

有没有一种简单的方法可以将每个工具页面 (html+javascript) 移植到 iFrame 而无需重新编写大量代码（在我的天真中，我认为只需在 iFrame 中使用 target='' 调用页面href会起作用）？还是有更好的方法来完成我想做的事情？也许 iFrame 不是解决方案。

Answer 1

iframe 中的内容仍然独立于包装应用程序，因此它无法正常工作是有道理的。除了为与围绕 iframe 的 div 关联的单击事件构建侦听器之外，如果 iframe 文档指向不同的来源，则无法访问它。 （见【同源政策】 (https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))

继续使用简单的 html/css/js 解决方案：
您可以使用常规 div 来包装每个“独立”内容，然后只需使用您拥有的任何按钮/导航目标来显示该 div 并通过使用 onClick 事件更改其 css 显示样式来隐藏前一个。

更具侵入性的选择： 您可能需要考虑使用更模块化的 JS 方法，例如 React JS，来构建组件与页面，并利用 React 的结构来切换组件。

通过 react，您可以在用户选择每个“工具”时对其进行渲染。您还可以利用 React 组件状态来帮助存储数据等组件的生命周期。