VSCode: 如何在Webview中启用网页中的链接

Question

vscode.previewHtml 已弃用 Webview。我使用这个新 API 更新了我的 ahk extension for vscode。使用 hh.exe -decompile Docs AutoHotkey.chm 我得到了 AutoHotkey 主站点的本地网站版本。我想在第二列中显示一个上下文文档，以便您可以在编码时阅读它。所以我做了。我成功地加载了带有样式表的页面，但是 links 不起作用：我总是在同一页上。

即使我可以更改它们的 href，我也无法转到其他页面。尽管您可以在工具提示中读取 href 值，但每次单击 link 时都没有任何反应。 Docs 文件夹存储在扩展路径中，因此 localResourceRoots 应该没问题。

我注意到的一件奇怪的事情是，即使 enableScripts 设置为 true，似乎并不是所有的 js 代码都被执行，因为在 AutoHotkey 网站上，在 .chm 和每个 . html 使用 FF 打开的文件我可以看到侧边栏，但在 WebView 页面中看不到。

这是创建 WebView 的代码：


 this.docsPanel = vscode.window.createWebviewPanel('ahk-offline-docs', 'Documentation', { viewColumn: vscode.ViewColumn.Two, preserveFocus: true }, {
                enableScripts: true,
                enableFindWidget: true,
                enableCommandUris: true,
                localResourceRoots: [vscode.Uri.file(path.join(this.docsDirectoryPath, 'docs//')).with({ scheme: 'vscode-resource' })]
            });
            this.docsPanel.onDidDispose((e) => {
                this.isDocsPanelDisposed = true;
            });

这是将页面加载到 WebView 的代码：


let url = vscode.Uri.file(path.join(this.docsDirectoryPath, 'docs/')).with({ scheme: 'vscode-resource' });
                    const dom = new JSDOM(data, { runScripts: "dangerously" });
                    const aTags = dom.window.document.getElementsByTagName('a');
                    const len = aTags.length;
                    const basePath = url.toString();
                    for (let i = 0; i < len; i++) {
                        const a = aTags[i];
                        if (!a.href.includes('about:blank')) {
                            const commentCommandUri = vscode.Uri.parse(`command:ahk.spy`);
                            a.href = basePath + a.href;
                            // a.removeAttribute('href');
                            // a.setAttribute('onclick', '{command:ahk.spy}');
                        }
                    }
                    let ser = dom.serialize();
                    this.docsPanel.webview.html = /*data/*ser*/ser.toString().replace('<head>', `<head>\n<base href="${url.toString()}/">`);

另一个想法是从页面启动 vscode.commands（因为 enableCommandUris），但我不知道如何进行这种操作。

如果 need/want 重现此问题，您只需克隆存储库，进入 improving-offline-docs 分支并打开文件 offline-docs-manager.ts，方法是 openTheDocsPanel()

有没有办法使用 links 切换当前页面？我应该开发一个 postMessage 系统吗？或者我错过了某处的设置？或者有更好的方法吗？

提前致谢！

Answer 1

Webviews 无法导航到当前 webview 内的另一个页面。如果您的 webview 尝试这样做，您应该会在 webview 开发人员工具

中看到一条消息，例如 prevented webview navigation

在 webviews 中有两种处理 links 的方法：

<a> 元素 link 到外部资源——例如 https: 或 mailto: links——应该在大多数情况下工作个案。可能会有一些奇怪的边缘情况，如果你运行进入其中一个，你会想使用 command uri 或 postMessage 在你的主扩展源中触发一些动作
如果您想更新 webview 内容本身，但由于某些原因无法在 webview 本身内执行此操作，请使用 command uri 或 postMessage 调用某些函数在您的主要扩展源中，更新了 webview 的 html

VSCode: 如何在Webview中启用网页中的链接

VSCode: How to enable links in a webpage in the Webview

autohotkey

webview

typescript

visual-studio-code

vscode-extensions