即使在 <body> 标签中加载了脚本，document.body 也未定义

问题描述

我们在大规模的 React SPA 中基本上有这个：

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="root"></div>
    <script src="/application.js"></script>
    <script src="a-third-party-remote-script.js"></script>
    <script>var configFor3rdPartyStuff = {keyvalstuff}</script>
  </body>
</html>

在应用程序内部，我们可能会这样做（在一些深度嵌套的导入中）：

const Popup = () => {
  useEffect(() => {
    const div = document.createElement('div')
    div.textContent = 'hello world'
    document.body.appendChild(div)
  },[])
}

ReactDOM.render(<Popup />,document.querySelector('#root'))

document.body 出现的时间超过 99%，但在少数情况下（2 个月内 document.body 似乎是null，因为 rollbar 正在我们执行 document.body.appendChild(div) 的地方捕获并记录错误。这是因为我们需要等待 window.onload 事件吗？还是别的什么？

我想到了两种可能的解决方案。一种是在 script 之后以编程方式动态加载 window.onload 元素。另一种是在应用入口点内等待 window.onload，使 onload 回调执行 ReactDOM.render...。由于我无法重现此问题，因此我不确定这是解决方案。您认为理想的架构应该怎么做才能避免这种错误？

到目前为止，该错误似乎只发生在 Windows 版 Chrome 和 Android 版 Chrome Mobile WebView 上（如果这有区别的话）。

是否有可能客户在应用程序仍在加载时关闭浏览器，然后当他们重新打开应用程序时，加载的代码运行，但可能会被切断，并且它在主体准备好之前运行？我不这么认为，而是尝试跳出框框思考。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dom javascript reactjs reactjs script-tag

即使在 <body> 标签中加载了脚本，document.body 也未定义

问题描述

解决方法

相关问答