如何在 VSCode Webview 中从 IFRAME 启用 target="_black"答案

【问题标题】：How to enable target="_black" from IFRAME in VSCode Webview如何在 VSCode Webview 中从 IFRAME 启用 target="_black"
【发布时间】：2021-05-19 12:06:35
【问题描述】：

当我在 VSCode 的 WebView 中使用 iframe 时，默认情况下会禁用弹出窗口。也就是说，如果您有一个带有 target="_black" 的锚标记，它将不会打开新的浏览器。有没有办法解决这个问题？

const panel = vscode.window.createWebviewPanel('openWebview',
'Title',
vscode.ViewColumn.One,
{
    enableScripts: true
});
panel.webview.html = getWebviewContent();
....
....
function getWebviewContent() {
    return `<iframe src="http://localhost:8080/homepage" title="Title"></iframe>`;
}

主页有一些使用锚标记的外部引用

<a href="https://owasp.org" rel="noopener noreferrer" target="_blank">OWASP</a>

如果我在 iFrame 中单击此链接，则没有任何反应。我想在外部网络浏览器中打开该链接。

谢谢你

【问题讨论】：

尝试yahoo.com', '_blank')">测试
感谢@abhinavxeon，我尝试了`onClick="window.open('yahoo.com', '_blank')"`，但没有成功。正如我所提到的，在使用 iframe 时，这似乎是 VSCode Webview 中的一个限制。

标签： webview vscode-extensions

【解决方案1】：

我没有找到直接的解决方案。 VS 代码 Webview 中有一个限制。因此，我能想到的唯一解决方案是在您的 html 页面中添加消息支持。基本上，当您单击链接时，我们将向父框架发送消息事件，该事件可以在 WebView 中捕获。

例如，HTML页面应该更新为

<a href="https://owasp.org" rel="noopener noreferrer" target="_blank"
  onClick="window.parent.postMessage(this.href, '*')">OWASP</a>

在 VS 代码插件中，

const panel = vscode.window.createWebviewPanel('openWebview',
    'Title', vscode.ViewColumn.One, { enableScripts: true });

panel.webview.onDidReceiveMessage(
  message => {
     switch (message.command) {
            case 'show':
              vscode.env.openExternal(vscode.Uri.parse(message.text));
              return;
          }
        },
        undefined,
        context.subscriptions
      );
    panel.webview.html = getWebviewContent();
});
...
...
function getWebviewContent() {
  return `<script> 
    window.addEventListener('message', function (e) {
      const vscode = acquireVsCodeApi();
      vscode.postMessage({command: 'show', text: e.data});
    }, false);
    </script>
    <iframe src=" http://localhost:8080/homepage" ></iframe>`;
}

【讨论】：