子应用在使用 iframe 模式时，如何继承主应用的 window 中定义的变量？

bjj-elestyle commented 9 months ago

首先感谢 micro-app 团队开发的这个微前端库，经过多个微前端库的尝试，还是 micro-app 的表现最为稳定。

目前在开发中我遇到了一个小问题：当子应用使用了 iframe 模式后，如何在主应用中配置暴漏给子应用的 window.xxx 变量？

目前我只能在子应用初始化时，执行以下代码来满足需求

主应用

<script setup>
const data = {
  window: {
    __ENV__: window.__ENV__
  }
}

</script>  

<template>
  <micro-app
    name="demo"
    url="http://localhost:8080/demo.html"
    :data="data"
    disable-memory-router
    disable-patch-request
    iframe
  ></micro-app>
</template>

子应用

if (window.__MICRO_APP_ENVIRONMENT__) {
  data = window.microApp.getData()
  Object.assign(window, data.window)
}

我寻遍了文档，没有找到更好的实现方式。请问是否存在可以在主应用中通过配置来实现iframe子应用继承主应用全局变量的方法？或者是否有计划提供这个功能？

bailicangdu commented 9 months ago

感谢反馈，我们也发现了这个问题，计划在近期支持

boogie-ben commented 9 months ago

子应用直接读 window.rawWindow.__ENV__ 可以吗

bjj-elestyle commented 9 months ago

子应用直接读 window.rawWindow.__ENV__ 可以吗

可以的，和我的解决方法类似，只是必须要保证在依赖代码执行前将变量写入子应用window 也就是说子应用必须要意识到这件事，如果能在主应用中做配置，使子应用的环境直接继承指定的变量，这样子应用几乎都不用意识自己是在micro-app的主应用中，这样岂不是更好

micro-zoe / micro-app

子应用在使用 iframe 模式时，如何继承主应用的 window 中定义的变量？ #1073