Typescript VSCode：如何在Webview中启用网页中的链接_Typescript_Webview_Visual Studio Code_Autohotkey_Vscode Extensions

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

typescript webview visual-studio-code autohotkey

Typescript VSCode：如何在Webview中启用网页中的链接,typescript,webview,visual-studio-code,autohotkey,vscode-extensions,Typescript,Webview,Visual Studio Code,Autohotkey,Vscode Extensions,vscode.previewHtml因支持Webview而遭到反对。我使用这个新的API更新了我的应用程序。通过hh.exe-decompiledocs AutoHotkey.chm我获得了一个本地网站版本的主AutoHotkey站点。我想在第二列中显示一个上下文文档，这样您可以在编码时阅读它。所以我做了。我成功地加载了带有样式表的页面，但是链接不起作用：我总是呆在同一个页面上即使我可以更改他们的href，我也无法转到其他页面。尽管您可以在工具提示中读取href值，但每次单击链接时

vscode.previewHtml

因支持Webview而遭到反对。我使用这个新的API更新了我的应用程序。通过

hh.exe-decompiledocs AutoHotkey.chm

我获得了一个本地网站版本的主AutoHotkey站点。我想在第二列中显示一个上下文文档，这样您可以在编码时阅读它。所以我做了。我成功地加载了带有样式表的页面，但是链接不起作用：我总是呆在同一个页面上

即使我可以更改他们的href，我也无法转到其他页面。尽管您可以在工具提示中读取href值，但每次单击链接时都不会发生任何事情。 Docs文件夹存储在扩展路径中，因此

localResourceRoots

应该可以

我注意到的一件奇怪的事情是，即使

enableScripts

设置为true，似乎也没有执行所有的js代码，因为在AutoHotkey网站上，.chm和使用FF打开的每个.html文件中，我都可以看到侧边栏，但在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;
            });


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()}/">`);

这是将页面加载到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;
            });


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()}/">`);


让url=vscode.Uri.file（path.join（this.docsDirectoryPath，'docs/））。带有（{scheme:'vscode resource'}）；
constdom=newjsdom（数据，{runScripts:“危险的”}）；
const-aTags=dom.window.document.getElementsByTagName（'a'）；
常数len=aTags.length；
const basePath=url.toString（）；
for（设i=0；i


另一个想法是从页面启动vscode.commands（因为启用命令uris
），但我不知道如何执行这种操作
如果您需要/想要重现此问题，您只需克隆回购，进入改进脱机文档
分支并打开文件脱机文档管理器.ts
，方法是打开DocSpanel（）

有没有办法使用链接切换当前页面？
我应该开发一个postMessage系统吗？
还是我错过了某个地方？
还是有更好的方法
提前谢谢
 webview无法导航到当前webview中的其他页面。如果您的webview尝试这样做，您应该会在webview开发人员工具中看到一条消息，如阻止webview导航

有两种方法可以处理WebView中的链接：

链接到外部资源（如https:
或mailto:
链接）的元素在大多数情况下都应该工作。可能存在一些奇怪的边缘情况，如果遇到其中一种情况，您可能希望使用命令
uri或postMessage
在主扩展的源代码中触发一些操作
如果您想更新webview内容本身，但由于某些原因无法在webview本身中执行此操作，请使用命令
uri或postMessage
调用主扩展源中更新webview html的某个函数
嘿，马特·比纳，谢谢你的回复！如何使用arg使命令生效letdom=newjsdom（数据，{runScripts:“危险的”}）；对于（let i=0；i
command:ahk.docs？${basePath+a.href}）；a.href=commentCommandUri.toString（）；}}let html=dom.serialize（）我尝试了编码ahk.spy
命令，但不起作用。在哪里可以找到使用command？的示例？。关键是使用json字符串化数组和encodeURIComponent