4、消息传递前面说过，你可以简单的把 WebView 理解成 iframe，那这也意味着它们都可以运行脚本 。不过默认情况下 WebView 中禁用 JAVAScript，你可以通过传入 enableScripts: true 来启用 。不过官网建议 WebView 应始终使用内容安全策略禁用内联脚本，所以我们这里就不做展开 。但是这一点也不影响我们发挥 WebView 的巨大作用——消息传递 。
WebView 调试在消息传递内容之前，我觉得有必要说一下这个调试工具命令 Developer: Toggle Developer Tools 。你可以通过 comand+p（macOS）唤起这个开发者调试命令，可以帮你在调试 WebView 的时候“如鱼得水”，轻松捕获异常并 fix
文章插图
当然你还可以在 Elements 里面查看 dom 的结构，简直就是太熟悉了~
文章插图
WebView 接收消息首先我们先来了解一下如何从我们的插件应用向我们的 webview 传递消息 。聪明的你一定猜到了对不对？没错就是 postMessage！
修改我们的注册命令如下：
- 把 createWebviewPanel 的变量存到一个新的变量上去
- 新增了一个用于消息传递的命令 webview.doRefactor
- 同时因为在 HTML 内部需要监听 message 的传递，所以我们必须确保开启脚本，也就是上文说的 enableScripts:true
- 为了确保我们不眼花缭乱，这里也去掉了之前的定时器 setInterval
...let currentPanel; // 重新定义一个变量用于多个命令之间的使用 const webviewCommand = vscode.commands.registerCommand('webview.start', () => {currentPanel = vscode.window.createWebviewPanel('hgWebview','HelloGitHub webview',vscode.ViewColumn.One,{enableScripts: true // 开启 js 脚本权限});let iteration = 0;const updateWebview = () => {const key = iteration++ % 2 ? 'descripton' : 'slogon';currentPanel.title = webviewTxt[key];currentPanel.webview.html = hgWebviewFun(webviewTxt[key]);};updateWebview();// const interval = setInterval(updateWebview, 1000); 去掉定时器currentPanel.onDidDispose(() => {// clearInterval(interval); 去掉定时器currentPanel = undefined; // 销毁 webview 的时候释放变量},null,context.subscriptions); }); // 注册一个新的命令 const webviewRefactorCommand = vscode.commands.registerCommand('webview.doRefactor', () => {if (!currentPanel) {return;}// 向 webview 发送消息// 你可以发送任何 JSON 序列化的数据currentPanel.webview.postMessage({ command: 'refactor', msg: '请多关注我们~' }); })context.subscriptions.push(webviewCommand, webviewRefactorCommand); ...为了防止有人在跟着敲的时候漏掉这一步，我决定还是再提醒一下~要在 package.json 里面加上新注册的这个命令哦：...{"command": "webview.start","title": "open a webview page","category": "HelloGitHub webview"},{"command": "webview.doRefactor","title": "doRefactor a webview page","category": "HelloGitHub webview"}...有了消息的发送，当然也需要有消息的接收啦！这才能完成通信嘛~所以我们要修改我们的 HTML 文件，加一个用于接收消息的监听：module.exports = (txt) => {return `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hello GitHub</title></head><body><img src=https://www.isolves.com/it/cxkf/bk/2021-09-01/"https://cdn.jsdelivr.net/gh/521xueweihan/img_logo@main/logo/readme.gif" width="300" />hello
${txt}