我有一个由单个页面组成的现有网站（每个页面都是一个不同的工具，需要一些用户输入（即表单），每个页面都有自己的一组javascript函数来填充该页面上的下拉列表等）。每个工具都可以从主index.html访问。
我希望每个工具都可以在iFrame中显示而不是在主页面上显示，而不是每个工具都是自己从index.html调用的“独立”页面。这样主页面保持静态，而只使用用户选择的任何工具更新iframe。所以在主索引页面上说，我有一个3工具菜单（收集日志，收集KPI，收集状态），以及一个iFrame。例如，如果用户选择收集日志，则包含“收集日志”的菜单将保留在那里，但“收集日志”页面将显示在iFrame中。
我的问题是所有HTML内容都运行正常，但所选工具页面中的javascript代码都不起作用（即没有填充下拉列表，因为它是通过读取文件来执行该操作的页面中的javascript代码在服务器上。）
有没有一种简单的方法可以将每个工具页面（html + javascript）移植到iFrame而无需重新编写大量的代码（在我的天真中，我认为只需使用target =''在iFrame中调用页面href会工作）？还是有更好的方法来完成我想要做的事情？也许iFrame不是解决方案。
答案 0 :(得分：0)
iframe中的内容与包装器应用程序保持独立，因此它无法正常工作。除了为围绕iframe的div关联的click事件构建侦听器之外，如果iframe文档指向不同的原点，则无法访问该iframe文档。 （见[同源政策] （https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy））
继续使用简单的html / css / js解决方案：
您可以使用常规div来包装每个“独立”内容，然后使用您显示的任何按钮/导航目标，通过使用onClick事件更改其css显示样式来隐藏前一个。
更具侵入性的选择： 您可能需要考虑使用更模块化的JS方法（如React JS）来构建组件与页面，并利用React的结构来切换组件。
通过反应，您可以在用户选择时渲染每个“工具”。您还可以利用React组件状态来帮助存储组件生命周期中的数据等。