将 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。