将 iframe 内容设置为从 fetch 命令返回值

Question

我想将 html 页面上的 iframe 内容设置为来自 js 中 fetch 命令的响应。我目前正在使用此代码。

window.fetch(
        "https://www.youtube.com/embed/SXR0D3MzpBM?autoplay=0&mute=1", {
    method: 'GET',
    accept: 'text/html',
    mode: 'no-cors'
})
.then(data => {
    console.log(data);

    var iframe = document.getElementById('video');
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(data);
    iframe.contentWindow.document.close();
});

当我测试这段代码时，iframe 只显示

   [Object Response]

我想在 iframe 中看到嵌入的 YouTube 视频。

Answer 1

data 是您需要等待的承诺对象或另一个 then

.then(async (data) => {
    data = await data.text();
.....

但是还有一个问题，响应头没有 Access-Control-Allow-Origin，所以你无法读取响应。并且 mode: 'no-cors' 不会绕过 CORS。