前端开发干货：让 iframe 焕发新生开发 _前端

作者：damyxu，腾讯 PCG 前端开发工程师

iframe是一个天然的微前端方案，但受限于跨域的严格限制而无法很好的应用，本文介绍一种基于 iframe 的全新微前端方案，继承iframe的优点，补足 iframe 的缺点，让 iframe 焕发新生。

背景前端开发中我们对iframe已经非常熟悉了，那么iframe的作用是什么？可以归纳如下：
在一个web应用中可以独立的运行另一个web应用
这个概念已经和微前端不谋而合，相对于目前配置复杂、高适配成本的微前端方案来说，采用iframe方案具有一些显著的优点：

非常简单，使用没有任何心智负担
隔离完美，无论是 js、css、dom 都完全隔离开来
多应用激活，页面上可以摆放多个iframe来组合业务

但是开发者又厌恶使用iframe，因为缺点也非常明显：

路由状态丢失，刷新一下，iframe 的 url 状态就丢失了
dom 割裂严重，弹窗只能在 iframe 内部展示，无法覆盖全局
通信非常困难，只能通过 postmessage 传递序列化的消息
白屏时间太长，对于SPA 应用应用来说无法接受

能否打造一个完美的iframe，保留所有的优点的同时，解决掉所有的缺点呢？
无界方案无界微前端框架通过继承iframe的优点，解决iframe的缺点，打造一个接近完美的iframe方案。
来看无界如何一步一步的解决iframe的问题，假设我们有 A 应用，想要加载 B 应用：

文章插图

在应用 A 中构造一个shadow和iframe，然后将应用 B 的html写入shadow中，js运行在iframe中，注意iframe的url，iframe保持和主应用同域但是保留子应用的路径信息，这样子应用的js可以运行在iframe的location和history中保持路由正确。

文章插图

image-20211206160113792
在iframe中拦截document对象，统一将dom指向shadowRoot，此时比如新建元素、弹窗或者冒泡组件就可以正常约束在shadowRoot内部。

文章插图

接下来的三步分别解决iframe的三个缺点：

? dom 割裂严重的问题，主应用提供一个容器给到shadowRoot插拔，shadowRoot内部的弹窗也就可以覆盖到整个应用 A
? 路由状态丢失的问题，浏览器的前进后退可以天然的作用到iframe上，此时监听iframe的路由变化并同步到主应用，如果刷新浏览器，就可以从 url 读回保存的路由
? 通信非常困难的问题，iframe和主应用是同域的，天然的共享内存通信，而且无界提供了一个去中心化的事件机制

文章插图

将这套机制封装进wujie框架：

文章插图

我们可以发现：

? 首次白屏的问题，wujie实例可以提前实例化，包括shadowRoot、iframe的创建、js的执行，这样极大的加快子应用第一次打开的时间
? 切换白屏的问题，一旦wujie实例可以缓存下来，子应用的切换成本变的极低，如果采用保活模式，那么相当于shadowRoot的插拔

文章插图

image-20211206160227875
由于子应用完全独立的运行在iframe内，路由依赖iframe的location和history，我们还可以在一张页面上同时激活多个子应用，由于iframe和主应用处于同一个top-level browsing context，因此浏览器前进、后退都可以作用到到子应用：