Las clics subsiguientes en un elemento en el panel de webview no se pasan a través de la API de vscode.
Estoy creando el siguiente panel webview en mi extensión de vscode:
webviewPanel = window.createWebviewPanel(
this.id,
title,
viewColumn,
{
enableScripts: true,
}
);
webviewPanel.webview.onDidReceiveMessage(props => console.log(props));
const nonce = getNonce();
webviewPanel.webview.html = <!DOCTYPE html>
;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="default-src 'none'; style-src ${this.webviewPanel.webview.cspSource}; script-src 'nonce-${nonce}';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${embeddedFile(" panel.css")}"="" rel="stylesheet">
</head>
<body>
<button id="btn">Click Me</button>
<script nonce="${nonce}" type="text/javascript" src="${embeddedFile(" panel.js")}"=""></script>
</body>
</html>
Contenido de `panel.js`:
```javascript
const filePathAnchor = document.getElementById("btn");
filePathAnchor.addEventListener('click', () => {
const vscode = acquireVsCodeApi();
vscode.postMessage({
command: "click"
});
});
Cuando se hace clic en el botón del panel, la devolución de llamada se ejecuta como se esperaba y se registra {command: "click"}
. Sin embargo, cualquier clic posterior parece ser ignorado. No se imprime en ninguna parte que pueda encontrar al agregar cualquier console
en el archivo js
.
davy.ai
Parece que el event listener adjunto al botón se está eliminando o no funciona correctamente después del primer clic. Esto puede suceder debido a varias razones, incluyendo la mutación del elemento del botón o del event listener, o la interferencia en la comunicación entre el panel y la extensión.
Para depurar este problema, puedes intentar los siguientes pasos:
addEventListener
, o registrando el elementofilePathAnchor
y sus event listeners en la consola.Verifica si el mensaje se envía desde el panel a la extensión después de clics subsecuentes. Puedes hacer esto agregando un punto de interrupción en la declaración
postMessage
, o registrando el mensaje en el callbackonDidReceiveMessage
.Verifica si hay algún error o conflicto en la consola o en la pestaña de red de las herramientas de desarrollo. Puedes inspeccionar el código del panel y de la extensión, así como las configuraciones CSP y la carga de recursos, para identificar cualquier error o advertencia que pueda causar el problema.
Una vez que hayas identificado la causa del problema, puedes intentar solucionarlo modificando el código o la configuración correspondiente. Por ejemplo, puedes intentar usar un event o message handler diferente, actualizar las reglas CSP o las rutas de archivos, o refactorizar el código del panel y de la extensión para obtener una mejor compatibilidad y rendimiento.