如何将JS fetch返回值设置为iframe内容以嵌入YouTube视频

你当前的代码有三个无法正常运行的核心问题：

• 直接将Response对象传入document.write()：fetch回调里拿到的data是Response实例，不是响应返回的HTML文本，强转为字符串后默认输出就是[object Response]，这就是你在iframe里看到该内容的直接原因。
• no-cors模式无法读取响应内容：你设置mode: 'no-cors'是为了规避跨域报错，但该模式下返回的是不透明响应，无法读取响应体、头部等任何有效内容，就算你后续手动调用text()方法，也只能拿到空字符串。
• 完全违背iframe的原生设计逻辑：iframe本身的设计就是直接通过src属性加载跨域页面，不需要手动拉取HTML再写入文档。更何况YouTube的嵌入页有严格的安全限制，就算你真的拿到了完整的HTML内容，写入后播放器的资源加载、脚本执行也会被浏览器同源策略拦截，根本无法正常运行。

最优方案：直接使用iframe原生能力加载 #

这是YouTube嵌入视频的标准实现方式，完全不需要额外的fetch操作：

<iframe 
  id="video"
  src="https://www.youtube.com/embed/SXR0D3MzpBM?autoplay=0&mute=1"
  width="640"
  height="360"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

如果需要动态修改加载地址，直接操作iframe的src属性即可：

const iframe = document.getElementById('video');
iframe.src = 'https://www.youtube.com/embed/SXR0D3MzpBM?autoplay=0&mute=1';

（仅作通用参考）需要手动写入iframe的场景实现 #

如果后续你遇到确实需要把fetch返回的HTML写入iframe的需求，需要满足两个前提：

1. 目标接口的服务端必须配置CORS规则，允许你的站点域名读取响应内容；
2. 必须显式调用text()方法将Response实例转为实际的文本内容，不能直接传入对象。

对应的代码模板如下：

window.fetch("已开启CORS的目标地址", {
  method: 'GET'
})
.then(res => res.text()) // 必须先将响应转为文本
.then(htmlContent => {
  const iframe = document.getElementById('video');
  iframe.contentWindow.document.open();
  iframe.contentWindow.document.write(htmlContent);
  iframe.contentWindow.document.close();
});

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