micro-app icon indicating copy to clipboard operation
micro-app copied to clipboard

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

Open bjj-elestyle opened this issue 1 year ago • 3 comments

首先感谢 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子应用继承主应用全局变量的方法?或者是否有计划提供这个功能?

bjj-elestyle avatar Jan 29 '24 10:01 bjj-elestyle

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

bailicangdu avatar Jan 30 '24 01:01 bailicangdu

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

boogie-ben avatar Jan 31 '24 09:01 boogie-ben

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

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

bjj-elestyle avatar Feb 01 '24 00:02 bjj-elestyle