高德地图在子应用中轨迹回放时报removeChild异常

[FBin001]

高德地图在子应用中轨迹回放时卡顿明显，无动画效果；在主应用中正常；

[tianfeng98]

我也遇到了同样的问题，拉源代码调试依然没解决。目前对于轨迹回放的部分只能先用iframe降级处理了。

[yiludege]

断点调试一下到底是什么原因，可以借鉴以下思路
#442 (comment)

[tianfeng98]

@yiludege 我找到了原因，但无法解决。
异常内容：
VM842:7 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

因为加载高德地图插件时有这样一个函数执行：

function F(t, i) {
  var n = document.createElement("script");
  (n.type = "text/javascript"),
    (document.body
      ? ((n.onload = function () {
          document.body.removeChild(n), i();
        }),
        (n.src = t),
        document.body)
      : ((n.onload = function () {
          document.head.removeChild(n), i();
        }),
        (n.src = t),
        document.head)
    ).appendChild(n);
}

对一个新的script标签做了增删操作。

我用两个js文件（a.js和b.js）复现了：

// a.js
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "/b.js";

script.onload = function () {
  document.body.removeChild(script);
};

document.body.appendChild(script);

在a.js中加载b.js，完成后调用removeChild移除script标签。

在子应用中加载a.js：

const script = document.createElement("script");
script.type = "text/javascript";
script.src = "/a.js";
document.body.appendChild(script);

通过上述步骤就可以复现问题。

我调试无界源码时，发现b.js的script加载会被移至iframe中加载，是否因为这个原因导致removeChild异常？

[tianfeng98]

codesandbox 复现示例

我用无界官网的 React17 子应用复现了这个问题，codesandbox沙箱内子应用加载失败，在浏览器中打开正常。
按照我上面的描述，增加a.js和b.js

我在wujie-core/src/effect.ts文件中加了一行console，以便定位问题。

问题截图：

[zouyujie]

这个问题我遇到并解决了，子应用用到高德地图的界面，捕获这个异常，然后重新实例化地图对象就可以解决这个问题

onMounted(() => {
  //界面页面第一次加载，地图白屏的问题
  window.onerror = function (message) {
    if (message.toString().includes("Failed to execute 'removeChild'")) {
      initAmap();
    }
  }
})
onUnmounted(() => {
  window.onerror = null;
})

[wentt]

jsLoader: (code: string) => {
      code = code.replace(
        /document.body.removeChild\((.+?)\)/g,
        '(document.head.contains($1) && document.head.removeChild($1))'
      )
      return code
    }