使用iframe嵌入有什么坑

What are the pitfalls of embedding using iframe

我正在尝试使用 Elm 来构建一个可重复使用的类似仪表板的 UI 以通过 yaml 文件进行声明式配置。

yaml 文件将指定一组可嵌入的网络应用程序(不仅基于 elm,而且理想情况下也 react/angular/vue)包含在此 UI 的每个实例中,例如通过指定标签和存储库 url.

我曾尝试使用传统的 Elm/React 方法接管标准的非 iframe dom 元素,但存在各种问题。 (主要是elm替换了它接管的元素,也就是说各个app不能共享同一个容器)

如果您愿意,可以在此处查看完整的概念证明 https://github.com/Dansvidania/mondrian-elm

有没有更好的方法? (我确定有)而且,如果我决定使用 iframe,我可能会遇到什么问题?我只找到反对 iframe 的轶事证据,而且(特别是对于沙盒)它们看起来很理想。

提前致谢

来自Cam Jackson's Micro Frontends artice on martinfowler.com

Just as with the server-side includes option, building a page out of iframes is not a new technique and perhaps does not seem that exciting. But if we revisit the chief benefits of micro frontends listed earlier, iframes mostly fit the bill, as long as we're careful about how we slice up the application and structure our teams.

We often see a lot of reluctance to choose iframes. While some of that reluctance does seem to be driven by a gut feel that iframes are a bit “yuck”, there are some good reasons that people avoid them. The easy isolation mentioned above does tend to make them less flexible than other options. It can be difficult to build integrations between different parts of the application, so they make routing, history, and deep-linking more complicated, and they present some extra challenges to making your page fully responsive.

我使用 iframe 没有问题。

与嵌入在 iframe 中的 javascript 代码进行通信是可行的,但我总觉得这样的代码被钉在一起并且缺乏优雅。

我在父网页和 iframe 之间设置了消息,以解决域问题并阐明父网页和 iframe 之间发生的通信。

Cookie 和 iframe 不能很好地跨域运行 - 但这可以解决。