为什么舍弃Iframe探究新的微前端技术?

为什么不用 iframe,这几乎是所有微前端方案第一个会被 challenge 的问题。但是大部分微前端方案又不约而同放弃了 iframe 方案,自然是有原因的,并不是为了 "炫技" 或者刻意追求 "特立独行"。

如果不考虑体验问题,iframe 几乎是最完美的微前端解决方案了。

iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题。

  1. url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
  2. UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中..
  1. 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
  2. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

其中有的问题比较好解决(问题1),有的问题我们可以睁一只眼闭一只眼(问题4),但有的问题我们则很难解决(问题3)甚至无法解决(问题2),而这些无法解决的问题恰恰又会给产品带来非常严重的体验问题, 最终导致我们舍弃了 iframe 方案。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当使用前端架构时,如果在加载 iframe 中的子应用时遇到错误,可能会有多种原因导致。以下是一些常见的问题和解决方法: 1. 跨域错误:如果子应用的源与主应用的源不同,浏览器会阻止跨域请求。你可以在子应用的服务器上配置适当的 CORS 头来允许跨域请求。确保在主应用中正确设置 iframe 的 src 属性,以使其与子应用的域名匹配。 2. 安全策略:某些浏览器可能会实施更严格的安全策略。在这种情况下,可以检查浏览器的控制台输出以获取更具体的错误信息,并根据所提供的信息采取相应的措施。 3. 子应用加载错误:检查子应用是否正确部署并可正常访问。确保子应用的入口文件正确设置,并且所有依赖项都被正确加载。 4. iframe 尺寸问题:确保为 iframe 设置了正确的宽度和高度。如果未设置或设置不正确,子应用可能无法正确显示。 5. 其他错误:如果上述方法都无法解决问题,建议仔细检查浏览器控制台的错误消息和警告。这些消息通常提供了有关发生错误的更多详细信息,例如特定的 JavaScript 错误或网络请求问题。根据控制台输出进行进一步的故障排除。 请注意,以上解决方法是一般性的建议,并且可能需要根据你的具体情况进行调整。如果问题仍然存在,请提供更多的详细信息,例如错误消息、代码片段等,以便更好地帮助你解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值