Question

当用户单击按钮时，我试图在我的React应用程序中动态加载TokBox嵌入脚本。脚本标签已添加到DOM并成功加载，但是无法继续下载opentok.min.js，因此视频控件从不呈现。但是，将代码直接添加到index.html可以正常工作。动态加载代码有什么不同？

Snippit：

import Script from 'react-load-script';
...
render() {
   return (
      <div>
         ...
         <div id="otEmbedContainer" style={{width:"300px", height:"300px"}}></div>
         {this.state.showVideo && 
            <Script
             url='https://tokbox.com/embed/embed/ot-embed.js?embedId=MYEMBEDID&room=' + this.state.roomId
            />
         }
      </div>
   )    
);

Answer 1

TokBox支持的响应：

请注意，当您动态加载嵌入时。您还需要在动态加载后触发以下事件（根据当前设计，嵌入式事件需要此事件）。
var DOMContentLoaded_event = document.createEvent("Event")
    DOMContentLoaded_event.initEvent("DOMContentLoaded", true, true)
    window.document.dispatchEvent(DOMContentLoaded_event).

我没有尝试过此操作，因为我现在切换为使用iframe解决方案，但为了保持连续性而在此处发布。

在ReactJS中动态加载TokBox嵌入脚本

1 个答案: