Question

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

即使我可以更改其href，也无法转到其他页面。尽管您可以在工具提示中读取href值，但每次单击链接时都不会发生任何情况。 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），但是我不知道如何执行这种操作。

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

是否可以使用链接切换当前页面？我应该开发一个postMessage系统吗？还是我错过了某个地方的设置？还是有更好的方法呢？

谢谢！

Answer 1

Web视图无法导航到当前Web视图内的另一个页面。如果您的webview尝试这样做，则应该在webview开发人员工具内看到诸如prevented webview navigation之类的消息

有两种方法可以处理网络视图中的链接：

<a>元素（例如https:或mailto:链接）在大多数情况下应该可以使用。可能会有一些怪异的极端情况，如果遇到其中一种情况，您可能想使用command uri或postMessage在主扩展的源代码中触发某些操作
如果您要更新Webview内容本身，并且由于某些原因而无法在WebView本身中执行此操作，请使用command uri或postMessage来调用主扩展程序中的某些函数更新的是Webview的html

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

1 个答案: