在低版本safari浏览器上会发生子应用加载到主应用的静态资源导致白屏【偶现频率较高】

[lllianreg]

问题描述

在低版本safari浏览器上会发生子应用加载到主应用的静态资源导致白屏【偶现频率较高】高版本无问题

复现步骤

1. 用macOS 12系统打开safari浏览器
2. 第一次清除缓存后打开正常
3. 刷新后进入子应用就会较高频率调用主应用资源 状态码404然后加载位置白屏

上传截图

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

const baseUrl = `${url}${baseroute || ''}${baseroute === '/' ? '' : pagePath}`;
microApp.renderApp({
  name: appName,
  url: baseUrl,
  iframe: true,
  container: '#container',
  'router-mode': 'pure',
  class: 'h-full w-full ',
  'keep-router-state': true,
  'default-page': `${baseroute || ''}${pagePath}`,
  'keep-alive':  route.meta.keepAlive,
  iframeSrc: `${location.origin}/empty.html`,
})

复现仓库

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

环境信息

• micro-app版本：
• 主应用前端框架&版本：vben-vue3 @micro-zoe/micro-app@1.0.0-rc.27
• 子应用前端框架&版本：vue@3.5.26 @micro-zoe/micro-app@1.0.0-rc.27
• 构建工具&版本：vite@6.4.1

[zhangr930103]

兄弟 你的点快了会有这个问题吗？Cannot read properties of null (reading 'nextSibling')

[5563]

方案二：使用window.stop()阻止脚本执行

在主应用head最前面插入下面js：

<script>if(window.parent !== window) {window.stop()}</script>

复制代码Error复制成功
window.stop虽然可以阻止脚本执行，但对于已经发送的js请求无法撤回，所以network中会看到canceled请求，但不影响正常功能，如果无法接受推荐使用方案一。
加个这个看看

[lllianreg]

方案二：使用window.stop()阻止脚本执行

在主应用head最前面插入下面js：

<script>if(window.parent !== window) {window.stop()}</script>

复制代码Error复制成功 window.stop虽然可以阻止脚本执行，但对于已经发送的js请求无法撤回，所以network中会看到canceled请求，但不影响正常功能，如果无法接受推荐使用方案一。 加个这个看看

有的 还是能复现

[laogong5i0]

const baseUrl = `${url}${baseroute || ''}${baseroute === '/' ? '' : pagePath}`;
microApp.renderApp({
  name: appName,
  url: baseUrl,
  iframe: true,
  container: '#container',
  'router-mode': 'pure',
  class: 'h-full w-full ',
  'keep-router-state': true,
  'default-page': `${baseroute || ''}${pagePath}`,
  'keep-alive':  route.meta.keepAlive,
  iframeSrc: `${location.origin}/empty.html`,
})

子应用中不要添加iframeSrc: '${location.origin}/empty.html', 这个就是加载主应用empty文件的，如果empty.html文件中含有其它静态资源，就会被加载了。