如何解析从 fetch() API 到 iframe 的 html 响应

Question

I am trying to display a web page into an iFrame using fetch() API, where I get the url from the user and then display the page into an iFrame as if it is locally hosted, so that I can use javascript to work on the iFrame 的页面没有跨域问题。

我正在寻找的是使用 srdoc 将响应重定向到 iframe 中。

html 页面的代码如下：

    <form method="POST">
                        <iframe id="frame" style="resize: both;width: 350px; height:500px;"></iframe>
                        <button type="button" onClick="retrieve()">Retrieve</button>  
                        </form>
                    </div>  
                     <div id="textarea">
                        <textarea id="` + tab_id + `" class="form-control" placeholder="Enter your source text here..." rows="20" onchange="change_textarea('` + tab_id + `')" onfocus="set_focus(this)" style="resize: vertical; min-height:35px;" readonly></textarea>
                    </div>  
                </div> 
            </form>

这是 javascript function：

function retrieve(){
    
    let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');
  headers.append('Origin', 'http://localhost:8080');
  headers.append('Access-Control-Allow-Origin', 'http://localhost:8080');
  headers.append('Access-Control-Allow-Credentials', 'true');
    console.log(headers);

    url = document.getElementById("tt").value;
    fetch(url, {
        mode: 'no-cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then((response) => {
        document.getElementById("frame").srcdoc = response;  
    }) 
}

显然，通过解析响应我没有得到结果，而只是 "[Object Response]"; 关于如何解析从 fetch API() 到 iFrame 的响应的任何建议？

Answer 1

.then((response) => {
    return response.text();  
})
.then((text) => {
    document.getElementById("frame").srcdoc = text;  
})