如何将zmmtg-root嵌入meetingSDKElement及解决iframe适配异常

一、将zmmtg-root嵌入指定容器meetingSDKElement #

Zoom Meeting SDK默认会将zmmtg-root挂载到<body>末尾，只需在初始化时添加containerId参数，即可指定自定义容器：

修改startMeeting函数中的ZoomMtg.init配置：

function startMeeting(signature) {
  $(".meeting-loader").css("visibility", "hidden");

  ZoomMtg.init({
    leaveUrl: leaveUrl,
    containerId: 'meetingSDKElement', // 新增：指定会议DOM挂载的目标容器ID
    success: (success) => {
      console.log(success)
      ZoomMtg.join({
        signature: signature,
        sdkKey: sdkKey,
        meetingNumber: meetingNumber,
        passWord: passWord,
        userName: userName,
        userEmail: userEmail,
        tk: registrantToken,
        zak: zakToken,
        success: (success) => {
          console.log(success)
        },
        error: (error) => {
          console.log(error)
        },
      })
    },
    error: (error) => {
      console.log(error)
    }
  })
}

同时可以移除原代码中的document.getElementById('zmmtg-root').style.display = 'block'，因为SDK会自动在目标容器内生成并显示会议元素。

二、iframe方案的UI适配调整 #

若必须使用iframe嵌入，需从iframe属性、容器样式和SDK配置三方面调整：

1. 设置iframe及父容器的自适应尺寸

<!-- 父容器需明确宽高，确保iframe能填满空间 -->
<div style="width: 100%; height: 100vh;">
  <iframe 
    id="zoomIframe" 
    src="你的会议页面URL" 
    style="width: 100%; height: 100%; border: none;"
    <!-- 开启必要权限，避免音视频、脚本受限 -->
    sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-top-navigation allow-media-access"
  ></iframe>
</div>

2. 在iframe内的会议初始化代码中添加适配配置

ZoomMtg.init({
  leaveUrl: leaveUrl,
  containerId: 'meetingSDKElement',
  isSupportAV: true, // 确保音视频功能正常加载
  disablePreview: false, // 允许显示预览界面
  success: (success) => {
    ZoomMtg.join({
      // ... 原有参会参数
      success: () => {
        // 加入会议后设置自适应布局
        ZoomMtg.setViewMode({
          viewMode: 'gallery', // 可选'speaker'，按需切换布局
          success: () => {},
          error: () => {}
        });
      }
    })
  }
})

3. 隐藏蓝色提示横幅（可选）
   若蓝色横幅是Zoom的预览或功能提示栏，可通过SDK配置隐藏：

ZoomMtg.setZoomJSSDKConfig({
  disableInvite: true,
  disableRecord: true,
  // 其他按需配置的项
});

优先推荐第一种直接挂载到指定容器的方案，比iframe更稳定，避免跨域和尺寸适配的额外问题。

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