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.

Sign up for GitHub

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

Jump to bottom

子应用通过html中内联脚本动态加载的script标签里的mount方法未执行 #1218

Open
Lie8466 opened this issue May 15, 2024 · 4 comments
Open

子应用通过html中内联脚本动态加载的script标签里的mount方法未执行 #1218

Lie8466 opened this issue May 15, 2024 · 4 comments
Assignees
@bailicangdu
Labels
bug Something isn't working Working on it Working on this issue

Comments

@Lie8466
Copy link

Lie8466 commented May 15, 2024 •
edited

问题描述

因为项目需要CDN降级兼容，资源的src需要判断是否需要使用降级的js链接，所以子应用html中是用内联script的形式动态的往body 上添加的script标签。但是动态加载js中的window.mount方法没有执行

复现步骤

子应用示例

<html>
<body>
<div id="app"></div>
    <script>
          const childNode = document.createElement('script');
          childNode.setAttribute('src', './index.js');
          document.body.appendChild(childNode);
    </script>
</body>
</html>

index.js中挂载了window.mount方法

index.js

window.mount = () => {
  console.log('sub1 mount');
  document.getElementById('app').innerHTML = 'Hello sub1';
}

window.unmount = () => {
  document.getElementById('app').innerHTML = '';
}

if (!window.__MICRO_APP_ENVIRONMENT__) {
  window.mount()
}

大致看了一下源码，在加载完html过程中会将<script> 的内联脚本和 src放在一个数组里，这个数组的js每一个执行完后会判断是否有window.mount，有则执行。
而通过内联脚本动态加载js执行是异步的不在上面这个过程里，所以js里的window.mount没有执行。

上传截图

请上传代码截图、控制台、终端等截图以帮助我们了解您的问题。

复现仓库

请提供一个精简的代码仓库，然后上传到自己的 github，以帮助我们复现您的问题。

https://github.com/Lie8466/micro-app-issue

环境信息

  • micro-app版本：1.0.0-rc.5
  • 主应用前端框架&版本：react
  • 子应用前端框架&版本：无
  • 构建工具&版本：
@Lie8466
Copy link
Author

Lie8466 commented May 15, 2024

有没有官方提供的patch方法可以快速解决一下的？

@bailicangdu bailicangdu self-assigned this May 15, 2024
@bailicangdu bailicangdu added bug Something isn't working Working on it Working on this issue labels May 15, 2024
@bailicangdu
Copy link
Member

这种情况暂时不要使用umd模式，近期会进行修复

@Lie8466
Copy link
Author

Lie8466 commented May 15, 2024

这种情况暂时不要使用umd模式，近期会进行修复

项目应用卸载比较频繁，文档写umd模式性能会好一些。请问大概多久？如果时间短我们可以等一等，时间长的话我们看看先如何解决

@bailicangdu
Copy link
Member

2周左右

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bailicangdu bailicangdu

Labels
bug Something isn't working Working on it Working on this issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bailicangdu @Lie8466