跳到主要内容

iframe

iframe的优缺点?​

优点:​

  • iframe能够原封不动的把嵌入的网页展现出来。
  • 使用简单
  • 很好的隔离,无论是 js、css、dom 都完全隔离开来

缺点​

  • url 不同步。 iframe页面内部的跳转, 不会让浏览器地址栏发生变化, 浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
  • UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中..
  • 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
  • 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
  • 白屏时间太长,对于SPA 应用应用来说无法接受
    • 在加载 iframe 时,浏览器需要额外的时间来解析和渲染 iframe 中的内容
  • 可能会出现上下、左右滚动条,用户体验度差
  • iframe框架页面会增加服务器的http请求
  • 通信比较繁琐,只能通过 postmessage 传递信息
  • 样式和布局限制:IFrame 的内容在页面中是独立的,它们具有自己的 CSS 样式和布局上下文。这导致在微前端架构中难以实现全局样式的一致性,以及子应用之间的布局和交互的协调问题。

iframe如何做微前端​

不管是iframe,还是其他的框架,都有其优点和缺点

  • iframe实现微前端,具有先天的优势,iframe是封闭的沙箱环境,具备隔离的环境,无论是样式隔离、js 隔离问题都可以解决

如何通信?​

  • window.postMessage():