如何实现一个更加纯粹的iframe

yiludege commented 2 years ago

我是无界微前端的作者，制作动机可查看文章，最近才看到这个微前端实现的思路和我的方案非常一致，而且也碰到相同的问题，子应用需要一个空白的、同域的、浏览器前进后退可以生效的 iframe 作为沙箱。

由于设置 iframe src 等于主应用域名，然后 appendChild 到 body 后通过 document.write 操作：

iframe.contentDocumennt.open();
iframe.contentDocumennt.write("");
iframe.contentDocumennt.close();

就可以得到一个空白的、同域的iframe，history.pushState 也可以正常工作，唯独一点，当子应用跳转路由后点击浏览器后退发现无效。

所以无界还是采用直接加载 iframe src 等于主应用域名的地址，然后等 location origin 初始化成主应用域名后立即停止iframe的加载，此时history.pushState 也可以正常工作、子应用跳转路由后点击浏览器后退也可以生效到子应用，但是在等待 location origin 初始化的过程中运行了部分主应用的代码，所以最好也要给一个宿主应用空的同域 URL 来作为这个 iframe 初始加载的 URL

想探讨一下有没有什么办法可以得到一个空白的、同域的、浏览器前进后退可以生效的 iframe 而不产生副作用

FringeY commented 2 years ago

简单回复下我们的实践，当然这个由于我们业务的特性并不一定有参考价值

我们有统一的前端网关，所以分配了一个独立的地址作为 iframe 的 src，这个地址不会加载 html 及其它静态资源
基于 1 的路由后退是可以 work 的，但在主子应用嵌套时仍然不是很好用

yiludege commented 2 years ago

大部分没有这个网关分配的条件，所以实现一个空白的、同域的、浏览器前进后退可以生效的 iframe还是非常的费劲

不过在主应用的 head 插入一个<script>if(window.__power_by_xxx__) window.stop()</script>这样的标签应该可以避免污染？

hqzh commented 1 year ago

大部分没有这个网关分配的条件，所以实现一个空白的、同域的、浏览器前进后退可以生效的 iframe还是非常的费劲

不过在主应用的 head 插入一个<script>if(window.__power_by_xxx__) window.stop()</script>这样的标签应该可以避免污染？

请问window.power_by_xxx可以举个例子我该怎么定义这个条件吗？

aliyun / alibabacloud-alfa

如何实现一个更加纯粹的iframe #99