WebView 类有一个向 WebView 内容发送消息的方法和一个从中接收消息的事件。请参阅中的章节关于消息传递的 vscode 文档 https://code.visualstudio.com/api/extension-guides/webview#scripts-and-message-passing.
在您的 webview 代码中,您可以通过以下方式接收消息:
// 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 内容的消息,如下所示:
// 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:
(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 内容发送消息非常简单:
currentPanel.webview.postMessage({ command: 'refactor' });