React应用嵌入TikTok视频无法正常显示问题求助

你将TikTok嵌入脚本加载到了React应用所在的父文档上下文，而iframe的srcDoc对应的是独立的DOM文档环境，父文档的脚本无法扫描到iframe内部的.tiktok-embed节点，因此无法将占位的blockquote标签渲染为完整的视频播放器。

方案1：脚本内置到iframe文档（推荐） #

你当前iframe的sandbox属性已经开放了allow-scripts执行权限，直接把之前移除的TikTok嵌入脚本放回传入srcDoc的HTML内容末尾即可，不需要在父页面额外预加载脚本，iframe加载时会自动拉取脚本并扫描内部DOM完成渲染。
调整后的完整嵌入HTML如下：

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@scout2015/video/6718335390845095173" data-video-id="6718335390845095173" style="max-width: 605px;min-width: 325px;" > 
  <section> 
    <a target="_blank" title="@scout2015" href="https://www.tiktok.com/@scout2015">@scout2015</a> 
    <p>Scramble up ur name & I’ll try to guess it😍❤️ 
      <a title="foryoupage" target="_blank" href="https://www.tiktok.com/tag/foryoupage">#foryoupage</a> 
      <a title="PetsOfTikTok" target="_blank" href="https://www.tiktok.com/tag/PetsOfTikTok">#petsoftiktok</a> 
      <a title="aesthetic" target="_blank" href="https://www.tiktok.com/tag/aesthetic">#aesthetic</a>
    </p> 
    <a target="_blank" title="♬ original sound - tiff" href="https://www.tiktok.com/music/original-sound-6689804660171082501">♬ original sound - tiff</a> 
  </section> 
</blockquote> 
<script async src="https://www.tiktok.com/embed.js"></script>

方案2：父页面加载脚本后手动触发渲染 #

如果需要统一在父页面管理嵌入脚本，可在iframe加载完成后调用TikTok脚本暴露的全局方法，指定扫描iframe内部的DOM节点：

// 组件挂载时加载嵌入脚本
componentDidMount() {
  const script = document.createElement('script');
  script.src = 'https://www.tiktok.com/embed.js';
  script.async = true;
  script.onload = () => this.setState({ scriptLoaded: true });
  document.head.appendChild(script);
}

// iframe加载完成后触发内部节点渲染
handleIframeLoad = () => {
  const iframeDoc = this.iframeRef.contentDocument;
  window.tiktokEmbed.load(iframeDoc);
}

render(){
  return (
    this.state.scriptLoaded && this.state.embedHtml ? 
    <iframe 
      ref={el => this.iframeRef = el}
      srcDoc={this.state.embedHtml} 
      sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation"
      onLoad={this.handleIframeLoad}
    />
    : null
  )
}

• 本地开发时如果使用localhost出现加载异常，可尝试改用127.0.0.1访问测试，TikTok嵌入对域名校验有一定要求。
• 如果你不需要iframe的隔离特性，也可以直接将.tiktok-embed节点插入到父页面DOM中，脚本会自动扫描渲染，无需额外处理。

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