Visual Studio 代码的 Webview API 是否支持 innerHTML？

Question

我正在构建一个 VSCode 扩展，它使用 webview 使用 javascript 和 innerHTML 显示动态数据。我发现代码在 Chrome 中工作正常，但 innerHTML 部分在 VS Code webview 中不起作用。

HTML代码

<!DOCTYPE html>
<html>

<body>
    <div id="root">
        Root
    </div>
    <script>
        document.getElementById('root').innerHTML += '<div>Inner HTML Success</div>'
    </script>
</body>

</html>

扩展代码如下：

    vscode.commands.registerCommand('my-extension.openFileInWebview', async (url: string) => {
        const panel = vscode.window.createWebviewPanel(
            'catCoding',
            'Cat Coding',
            vscode.ViewColumn.One,
            {}
        );

        const filePath = path.join(context.extensionPath, 'src', 'webviews', 'innerHtml.html');
        const fileContents = await readFile(filePath);
        const html = fileContents.toString();
        panel.webview.html = html;
    });

在 VS 代码中

在Chrome

Answer 1

支持

innerHTML。 Just that Javascript is disabled in webview by default，需要使用 enableScripts: true 选项启用。

        const panel = vscode.window.createWebviewPanel(
            'catCoding',
            'Cat Coding',
            vscode.ViewColumn.One,
            {
                enableScripts: true
            }
        );

Visual Studio 代码的 Webview API 是否支持 innerHTML？

Does Visual Studio Code's Webview API support innerHTML?

html

javascript

dom

webview

visual-studio-code

在 VS 代码中

在Chrome