Zoom Web SDK加载报错：Uncaught TypeError: Cannot read properties of null

核心问题 #

1. HTML结构违规：你把<head>标签放在了外部脚本之后，不符合HTML标准，会导致样式加载异常，同时干扰SDK对DOM元素的正常查找。
2. SDK加载时机过早：Zoom Web SDK初始化时需要操作DOM元素，若脚本在DOM未完全加载完成时执行，会找不到目标元素，触发Cannot read properties of null (reading 'append')错误。

修正步骤 #

1. 重构HTML结构 #

把样式链接移到<head>内，所有脚本放到<body>末尾，保证DOM先加载完毕：

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.1.0/css/bootstrap.css" />
  <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.1.0/css/react-select.css" />
</head>
<body>
  <!-- 提前创建Zoom SDK需要挂载的DOM容器 -->
  <div id="zoom-meeting-container"></div>

  <!-- 加载依赖库 -->
  <script src="https://source.zoom.us/2.1.0/lib/vendor/react.min.js"></script>
  <script src="https://source.zoom.us/2.1.0/lib/vendor/react-dom.min.js"></script>
  <script src="https://source.zoom.us/2.1.0/lib/vendor/redux.min.js"></script>
  <script src="https://source.zoom.us/2.1.0/lib/vendor/redux-thunk.min.js"></script>
  <script src="https://source.zoom.us/2.1.0/lib/vendor/lodash.min.js"></script>

  <!-- 加载Zoom SDK -->
  <script src="https://source.zoom.us/zoom-meeting-2.1.0.min.js"></script>

  <!-- 自定义脚本 -->
  <script src="{{ url_for('static', filename='script/meeting.js') }}"></script>
</body>
</html>

2. 延迟SDK初始化到DOM就绪 #

在meeting.js中添加DOM加载完成监听，再执行SDK初始化：

document.addEventListener('DOMContentLoaded', function() {
  // 初始化Zoom SDK
  ZoomMtg.init({
    leaveUrl: '/',
    isSupportAV: true,
    success: function() {
      // 后续业务逻辑
    },
    error: function(err) {
      console.error(err);
    }
  });
});

3. 确认挂载容器存在 #

检查初始化代码中指定的挂载容器（如上述的zoom-meeting-container）确实存在于DOM中，SDK需要将会议界面挂载到该元素上，否则会因找不到目标报错。

额外提示 #

• 若使用2.9.x等更高版本SDK，要确保依赖库版本与SDK版本匹配，避免版本不兼容问题。
• 查看浏览器控制台是否有资源加载失败提示，排除CDN资源无法访问的情况。

内容的提问来源于stack exchange，提问作者George