I have webserver running on http://localhost:550001. Then I use following code to create custom editor in visual studio:
async resolveCustomTextEditor(document: TextDocument, webviewPanel: WebviewPanel, _token: CancellationToken): Promise<void> {
const host = 'http://localhost:550001';
webviewPanel.webview.options = {
enableScripts: true,
localResourceRoots: [Uri.parse(host)]
};
webviewPanel.webview.html = `<!DOCTYPE html>
<html lang="en"">
<head>
<meta charset="UTF-8">
<title>Preview</title>
<style>
html { width: 100%; height: 100%; min-height: 100%; display: flex; }
body { flex: 1; display: flex; }
iframe { flex: 1; border: none; background: white; }
</style>
</head>
<body>
<iframe src="${host}"></iframe>
</body>
</html>`;
}
}
Editor is displayed correctly, however iframe is never loaded.
I can see following headers:
* General:
Request URL: http://127.0.0.1:55001/
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:55001
Referrer Policy: no-referrer-when-downgrade
* Response headers:
Connection: close
Content-Length: 334
Content-Type: text/html
* Request headers:
Accept: (removed)
Accept-Encoding: gzip, deflate, br
Accept-Language: pl
Connection: keep-alive
Host: 127.0.0.1:55001
Sec-Fetch-Dest: iframe
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: cross-site
Upgrade-Insecure-Requests: 1
User-Agent: (removed)
In headers I can see that request was successful (status 200, and correct response length). However this response is never written into iframe, nor shown in editor. Dev tools display request as "in progress" forever.
Also I can open this URL in my browser and it works. Why it does not work inside custom editor? What can I do to make it work?
question from:
https://stackoverflow.com/questions/65648595/cant-load-localhost-page-into-iframe-in-vscode-custom-editor 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
