基于 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对象