Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >为webview中的数据调用vscode扩展

为webview中的数据调用vscode扩展
EN

Stack Overflow用户
提问于 2019-07-01 06:32:02
回答 1查看 2.3K关注 0票数 0

我有一个列表,必须从扩展返回到我的webview页面的输入框。

就像webview中的javascript事件一样,它必须调用列表的扩展,然后使用该列表对象并在视图中显示列表数据。我该怎么做呢?

EN

回答 1

Stack Overflow用户

发布于 2019-07-02 07:17:40

WebView类有一个向WebView内容发送消息的方法和一个从该内容接收消息的事件。请参阅vscode documenation about message passing中的章节。

在您的webview代码中,您可以使用以下命令接收消息:

代码语言:javascript
运行
AI代码解释
复制
        // Handle the message inside the webview
        window.addEventListener('message', event => {

            const message = event.data; // The JSON data our extension sent

            switch (message.command) {
                case 'refactor':
                    count = Math.ceil(count * 0.5);
                    counter.textContent = count;
                    break;
            }
        });

在扩展代码中,您可以处理来自webview内容的消息,如下所示:

代码语言:javascript
运行
AI代码解释
复制
      // Handle messages from the webview
      panel.webview.onDidReceiveMessage(
        message => {
          switch (message.command) {
            case 'alert':
              vscode.window.showErrorMessage(message.text);
              return;
          }
        },
        undefined,
        context.subscriptions
      );

要向扩展发送消息,您必须在webview代码中获取vscode API:

代码语言:javascript
运行
AI代码解释
复制
        (function() {
            const vscode = acquireVsCodeApi();
            const counter = document.getElementById('lines-of-code-counter');

            let count = 0;
            setInterval(() => {
                counter.textContent = count++;

                // Alert the extension when our cat introduces a bug
                if (Math.random() < 0.001 * count) {
                    vscode.postMessage({
                        command: 'alert',
                        text: '?  on line ' + count
                    })
                }
            }, 100);
        }())

最后,从扩展向webview内容发送消息很简单,如下所示:

代码语言:javascript
运行
AI代码解释
复制
currentPanel.webview.postMessage({ command: 'refactor' });
票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56830928

复制
相关文章
从零开发一款基于 webview 的 vscode 扩展
在团队降本提效的基建中,洛竹开发了一款 vscode 插件,第一版我使用的是 vscode 内置 UI,虽说也能用,但是用户体验欠佳。由于 vscode 内置 UI 不够灵活,一番调研后我决定使用 webview 重构。
用户1250838
2021/09/18
4.9K0
从零开发一款基于 webview 的 vscode 扩展
WebView中shouldOverrideUrlLoading的调用时机
shouldOverrideUrlLoading一定在onPageStarted之前调用吗?答案是:不一定。
乱码三千
2021/07/29
2.8K0
vscode 中 docker 学习利器:vscode docker 扩展
可在 vscode 中安装 docker 扩展,具有若干好处: 可直接在 vscode 中打开容器中文件。比如 nginx 的配置,修改十分方便,无需 vim,重启也方便 可直接在 vscode 中在浏览器打开所暴露端口号。无需每次去查看 expose 或者 -p 关于端口号的映射关系。 可直接在 vscode 中打开容器的 shell,方便执行命令 ---- 以上内容节选自前端部署训练营知识库。
山月
2022/11/02
1.1K0
vscode 中 docker 学习利器:vscode docker 扩展
WebView中JS调用Native交互
通过vueProject(名称随意,需要和原生界面定义一致)对象直接调用Native的方法
程序员不务正业
2018/08/09
3.2K0
webview调用android代码
在开发的时候经常会用到webview,必然会涉及到webview与客户端的交互,比如在网页上进行某个操作后,需要在app上显示一个提示,提示内容由网页提供,这时候就需要js来调用客户端的java代码了。 webview提供了一个方法addJavascriptInterface()来满足这种需求。 具体步骤: 客户端定义一个类,并定义需要的方法,例如: public class WebAppInterface { Context mContext; /** * Instantiate
coderZhen
2018/06/28
8160
如何提升vscode扩展的速度
VS Code最受用户喜爱的就是它丰富的扩展。有成千上万的VS Code扩展可供选择。它们可以帮我们实现想要的一切,包括高亮语法显示我们喜欢的语言,格式化代码,为主题着色,方便地调试等等。
程序那些事儿
2023/03/07
3.7K0
如何提升vscode扩展的速度
Swissknife:脚本化的数据生成与篡改VSCode扩展
Swissknife是一个脚本化的VSCode扩展,可以帮助广大研究人员生成或修改数据,并防止在Web页面中泄露敏感数据。
FB客服
2021/05/20
1.4K0
Swissknife:脚本化的数据生成与篡改VSCode扩展
webview调用小程序支付流程
最近在做一个叫资源树的小型商城项目,其中有一个场景需要在小程序中嵌入的web-view内向小程序发起支付请求完成支付,折腾了一天,在网上各种经验的帮助下总算搞定了,现在记录一下流程
lestat
2018/09/21
3.2K0
webview调用小程序支付流程
VSCode的Python扩展下程序运行
在VSCode中编写Python程序时,由于有些地方要使用环境变量,但是发现设置的环境变量有时不起作用,花了点时间研究了一下,过程不表,直接说结论。
py3study
2020/01/19
1.9K0
在开发中实现点击 WebView 中的图片,调用原生控件放大展示
现在有很多时候,我们的 App 都进行了混合开发,而最简单,最常用的就是有些网页采用了 WebView 进行展示,这就需要我们了解和懂得如何实现 WebView 和 JS 进行交互。今天我们就来学习一下,如何点击 WebView 中的网页图片,调用原生控件进行放大展示。 其实实现这种交互非常简单,就是通过 JS 调用原生控件。基本思路如下: 首先加载一个 html 网页,网址或者本地 html 文件都可以。 遍历 html 标签源代码,找到所有的 img 标签节点。 给 遍历到得 img 标签节点加上 on
非著名程序员
2018/02/09
2.4K0
在开发中实现点击 WebView 中的图片,调用原生控件放大展示
VsCode 扩展巡礼-REST Client
RestClient是VsCode商店的有个http访问扩展,官方地址 RestClient,用于模拟Http请求。
needrunning
2019/08/06
2.9K0
如何在Python中为长短期记忆网络扩展数据
用于序列预测问题的数据可能需要在训练神经网络(如长短期记忆递归神经网络)时进行缩放。
bestLR
2018/02/02
4.1K0
如何在Python中为长短期记忆网络扩展数据
VSCode同步扩展配置神器
vscode工具就不介绍了,这已经是不能再谈的话题了。今天分享的是多台设备之间如何同步配置的问题。比如公司一台电脑,家里一台电脑,要想做到两台电脑上的配置、扩展等自动同步,减少重复安装与配置操作。
兔云小新LM
2020/01/22
1.5K0
Webview 为 VSCode 开启了一扇门,安全限制却又把它关上了
关注「前端向后」微信公众号,你将收获一系列「用心原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术
ayqy贾杰
2019/12/25
5.5K0
Webview 为 VSCode 开启了一扇门,安全限制却又把它关上了
如何扩展 VSCode JSON 智能提示?
关注「前端向后」微信公众号,你将收获一系列「用心原创」的高质量技术文章,主题包括但不限于前端、Node.js以及服务端技术
ayqy贾杰
2020/05/27
4.6K0
vscode 常用扩展插件(工具篇)
欲善其工必先利其器,本文以vscode编辑器为例子,分享一下笔者常用的vscode工具及技巧,同时也欢迎高手不惜赐教,分享更多的使用技巧,提高工作效率和编程幸福感。本文分为两个部分,常用插件和使用技巧,欢迎点赞(pai zhuan)。
用户3806669
2021/03/25
2.8K0
[PHP] vscode配置SFTP扩展同步文件
在我们的项目开发过程中,经常有一种模式,有一台linux的开发机作为我们的测试机器,上面安装了ftp服务。我们在windows系统的本地机器使用IDE编写代码,自动或者保存时同步上传到测试机下,这样就可以实时进行查看效果了,所以就需要IDE来配置一个ftp的上传插件
唯一Chat
2019/10/20
2.1K0
[PHP] vscode配置SFTP扩展同步文件
点击加载更多

相似问题

如何测试我为vscode创建的webview扩展?

12

可以在VSCode扩展的Webview中调用window.print()吗?

14

如何调试vscode扩展的WebView javascript

23

VSCode扩展webview外部html和css

47

VSCode扩展webview加载json文件问题

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档