我编写 vscode 扩展代码,并使用 webview 来呈现文本。文本存储在 json 文件中 - 这是一个巨大的文件,并且有很多文本。当鼠标悬停在 web 视图上时,该文本中的某些单词需要出现弹出窗口。单词和弹出信息存储在 json 中。例如:
{
wordA:{
popupText: "text"
//... and other properties
},
wordA:{
popupText: "another text"
//... and other properties
}
// .... and many many other data
}
我想将这个 json 数据从 webview 传递给外部 js 以便能够管理它。由于安全策略,我不能只从 javascript 文件中加载 json - 而且我不想破坏安全策略。
用于正确呈现数据的 HTML 代码由其他函数生成。
与问题相关的文件:
- ActivationFile - 推送激活方法并将 webview.ts 的引用传递给 vscode。
- webview.ts 文件 - 它具有正确显示我要呈现的内容和文本信息所需的所有功能
- myScript.js 文件 - 加载到 webview.ts
我想将数据从 webview.ts 传递给 myScript.js
///WebView.ts file
private _getHtmlForWebview(webview: vscode.Webview) {
const scriptPathOnDisk = vscode.Uri.joinPath(this._extensionUri, 'myScript.js');
const scriptUri = (scriptPathOnDisk).with({ 'scheme': 'vscode-resource' });
const jsonPath = fs.readFileSync(path.join(__dirname, 'jsonFile.json'), 'utf8');
const data = JSON.parse(jsonPath);
return `<!DOCTYPE html>
<html lang="en">
<head>
<some html stuff>...
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
</head>
<body>
<some html stuff which is generated automatically by other functions of the program>
<for presenting text from json, put them into divs, spans and give them proper ids>
<which will let the javascript manage those divs and spans>...
<script nonce="${nonce}" src="${scriptUri}" type="text/javascript"></script>
</body>
</html>`;
}
nonce由 webview.ts 中的函数生成
我尝试在将 myScript 加载到 html 之前添加脚本标记
<script nonce="${nonce}" type="text/javascript">
const jsonData = ${data};
</script>
<script nonce="${nonce}" src="${scriptUri}" type="text/javascript"></script>
但在 myScript 中无法访问数据。
console.log(jsonData.wordA.popupText)
显示错误,范围内不存在 jsonData
console.log(window.jsonData.wordA.popupText)
显示未定义
我看到了一些针对 React、Angular、Vue 等的解决方案,但这是简单的 webview,我在这里不需要任何大框架,据我所知,它们在这里不起作用。
我也看到了类似的acquireVsCodeApi()
东西,但我错过了一些东西,我不知道如何在我的情况下设置它。