Answer a question

I'm building a VSCode extension which uses webview to display dynamic data using javascript and innerHTML. I found that the code is working properly in Chrome, but the innerHTML section does not work in VS Code webview.

HTML code

<!DOCTYPE html>
<html>

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

</html>

Here is the extension code:

    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;
    });

In VS Code

innerHTML not loading in VS Code

In Chrome

innerHTML is working in Chrome

Answers

innerHTML is supported. Just that Javascript is disabled in webview by default, and needs to be enabled using enableScripts: true option.

        const panel = vscode.window.createWebviewPanel(
            'catCoding',
            'Cat Coding',
            vscode.ViewColumn.One,
            {
                enableScripts: true
            }
        );
# javascript # xhtml # webview
Logo
开发云

开发云社区提供前沿行业资讯和优质的学习知识，同时提供优质稳定、价格优惠的云主机、数据库、网络、云储存等云服务产品

更多推荐

负载均衡/路由一个使用socketio和flask制作的应用

问题:负载均衡/路由一个使用socketio和flask制作的应用 在部署 Web 应用程序方面,我有点菜鸟,我想确保我正在构建的一个小应用程序能够与我正在尝试使用的技术一起使用。 我对烧瓶有一些经验,但只使用过测试服务器。我的理解是,使用 nginx 或 apache,如果我编写一个烧瓶应用程序,每个访问我的网站的用户都可以获得一个烧瓶应用程序的不同实例,具体如何工作让我有点困惑。 我想做的应用

avatar 开发云

Nginx 重写规则没有按预期工作

问题:Nginx 重写规则没有按预期工作 我有一个网站https://dev.mywebsite.com/index.php?album=portraits,它根据 POST 值动态显示相册。 我想将此 URL 重写为:https://dev.mywebsite.com/portraits 但是我的 Nginx 重写规则不起作用。当我输入https://dev.mywebsite.com/inde

avatar 开发云

MySQL远程时缓存如何工作?

问题:MySQL远程时缓存如何工作? 我一直在使用 PHP 5.6 进行旧电子商务应用程序的服务器迁移。 切换涉及来自 Linode 的两台 Dedicated 32 服务器。 一台服务器用于 NginX + PHP,另一台仅用于 MySQL。 遗留应用程序利用 memcached。 切换后,我可以看到由于私有入站和出站连接导致的大量内部流量。 到目前为止,这个元素没有对性能造成任何问题。 但是,

avatar 开发云