Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
yiludege opened this issue Aug 8, 2022 · 3 comments
Open

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

yiludege opened this issue Aug 8, 2022 · 3 comments

Comments

@yiludege
Copy link

yiludege commented Aug 8, 2022

我是无界微前端的作者,制作动机可查看文章,最近才看到这个微前端实现的思路和我的方案非常一致,而且也碰到相同的问题,子应用需要一个空白的、同域的、浏览器前进后退可以生效的 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
Copy link
Collaborator

FringeY commented Aug 11, 2022

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

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

@yiludege
Copy link
Author

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

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

@hqzh
Copy link

hqzh commented Jan 13, 2023

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

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants