javascript - 使用iframe嵌入有哪些陷阱

标签 javascript iframe embed sandbox elm

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

yaml 文件将指定一组可嵌入的 Web 应用程序(不仅基于 elm,而且理想情况下还包括 React/Angular/Vue),以包含在此 UI 的每个实例中,例如通过指定标签和存储库 URL。

我尝试过使用传统的 Elm/React 方式来接管标准的非 iframe dom 元素,但存在各种问题。 (主要是elm替换了它接管的元素,意味着各个应用程序不能共享同一个容器)

如果您愿意,您可以在此处查看完整的概念证明 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.

关于javascript - 使用iframe嵌入有哪些陷阱,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56959713/

相关文章:

javascript - 格式化日期是JS

javascript - 设置相对于宽度的高度

javascript - 如何让 iframe 填充整个页面 100% 和顶部 :4px?

jquery - jQuery —调整多个对象的大小,链接宽度和高度比例

javascript - 如何验证 multer s3 中的不同文件类型?

javascript - JQuery 不在 Chrome 扩展中执行 PHP

javascript - Jquery 中的行总和

ios - iframe 在 iOS 上溢出 div

python - 如何在嵌入消息中包含普通内容?

javascript - 如何在同一页面上拥有相同的 javascript 变量?