Cómo detectar un clic del ratón en webview2 (c#/vb.net)

Intento conseguir los eventos clic en el elemento html. Con un WebBrowser Yo usaba:

instance = Nothing
            instance = WebBrowser1.Document
            AddHandler instance.Click, AddressOf Document_Click

Pero con Webview2 No encuentro la buena práctica. ¿Debo inyectar un código de javascript? Pero, ¿cómo consigo el cargador en la aplicación C# o Vb.net?

Muchas gracias.

Toma un código de muestra. No tengo la vuelta en mi función: WebView1_WebMessageRecibido. ¿Por qué? Creo que olvidé algo...

Imports System.IO
Imports Microsoft.Web.WebView2.Core
Imports Newtonsoft.Json


    Class MainWindow
        Public Sub New()
    
            InitializeComponent()
            InitializeSyncroComponent()
    
            ' Ajoutez une initialisation quelconque après l'appel InitializeComponent().
    
        End Sub
    
        Structure JsonObject
            Public Key As String
            'Public Value As PointF
        End Structure
    
        Async Sub InitializeSyncroComponent()
            Await webview1.EnsureCoreWebView2Async
            webview1.CoreWebView2.Navigate("https://google.fr/")
        End Sub
    
        Private Sub WebView1_WebMessageReceived(ByVal sender As Object, ByVal e As Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs)
            Dim jsonObject As JsonObject = JsonConvert.DeserializeObject(Of JsonObject)(e.WebMessageAsJson)
    
            Select Case jsonObject.Key
                Case "contextmenu"
                    'contextMenuStrip1.Show(Point.Truncate(jsonObject.Value))
                Case "mousedown"
                    Stop
                    ' contextMenuStrip1.Hide()
            End Select
        End Sub
    
        Private Sub webview1_NavigationCompleted(sender As Object, e As CoreWebView2NavigationCompletedEventArgs) Handles webview1.NavigationCompleted
            webview1.CoreWebView2.Settings.AreDefaultContextMenusEnabled = False
            Dim script As String = File.ReadAllText("d:\test_mouse.js")
            webview1.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(script)
        End Sub
    End Class

Script Java:

document.addEventListener('mousedown', function (event)
{
    let jsonObject =
    {
        Key: 'mousedown',
        Value:
        {
            X: event.screenX,
            Y: event.screenY
        }
    };
    window.chrome.webview.postMessage(jsonObject);
});

Editar: Encontré mi error... ¡No era mucho!

Había olvidado la declaración del WebMessageRecibido en la propiedad de la webview.

Webview Property

Pregunta hecha hace 3 años, 4 meses, 28 días - Por codemaestro

4 Respuestas:

  • Vale, no conozco el VB. Net, pero pareces ser capaz de traducir el código C#, así que intentaré crear una solución de trabajo simple en C#:

    Primero, descarga Microsoft.Web.WebView2y Newtonsoft.Json desde Nuget e instalar en su proyecto (probablemente ya lo has hecho).

    Ahora suelta el WebView2 on the form - then in Property Inspector:

    1. Establecer la fuente a: 'https://google.fr/'

    2. doble clic CoreWebView2InitializationCompleted y WebMessageReceived eventos para crear esqueletos en tu código.

    Ahora agregue este código traducido al VB. Net:

    using Microsoft.Web.WebView2.Core;
using Newtonsoft.Json;
using System.IO;
using System.Windows.Forms;

namespace WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        public struct JsonObject
        {
            public string Key;
            public string Value;
        }

        private async void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
        {
            string script = File.ReadAllText("Mouse.js");
            await webView21.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(script);
        }

        private void WebView21_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
        {
            JsonObject jsonObject = JsonConvert.DeserializeObject(e.WebMessageAsJson);
            switch (jsonObject.Key)
            {
                case "click":
                    MessageBox.Show(jsonObject.Value);
                    break;

            }
        }
    }
}

    Ahora cree un archivo javascript ('Mouse.js') en su directorio de proyecto, seleccione el archivo y en el inspector de propiedad seleccione Copiar al directorio de salida y elegir: Copy if newer. Eso significa que su archivo javascript puede ser encontrado por su programa VB utilizando el enlace relativo.

    Ahora pega el siguiente javascript en el archivo:

    document.addEventListener('click', function (event)
{
    let elem = event.target;
    let jsonObject =
    {
        Key: 'click',
        Value: elem.name || elem.id || elem.tagName || "Unkown"
    };
    window.chrome.webview.postMessage(jsonObject);
});

    Ahora, cuando lo ejecute usted debe conseguir una caja de mensajes Name, ID o Tag Name del elemento que haga clic (en ese orden).

    La razón por la que uso Key: 'click'acercamiento es que cuando más tarde desea detectar por ejemplo MouseDown Usted puede agregar fácilmente esa clave - entonces usted puede detectar ambos (Otros sólo puede detectar un tipo de evento).

    Actualización:

    Cambios CoreWebView2Readyevento a CoreWebView2InitializationCompleted. Ese es el nuevo nombre para el evento. Utiliza CoreWebView2InitializationCompletedEventArgscomo eventoArgs.

    Respondida el Dec 18, 2020 a las 09:22 - por debugdynamo

    Votos positivos: 0 | Votos negativos: 0

  • Actualización para nuevos espacios de nombres de Microsoft:

    using System.Text.Json;
using System.Text.Json.Serialization;
    private void WebView_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
    {
        JsonObject jsonObject = JsonSerializer.Deserialize(e.WebMessageAsJson);
        switch (jsonObject.Key)
        {
            case "click":
                MessageBox.Show(jsonObject.Value);
                break;

        }
    }

    Respondida el Dec 18, 2020 a las 09:30 - por quantumcoder403a

    Votos positivos: 0 | Votos negativos: 0

  • Para detectar un clic del ratón en un WebView2 en C

    o VB.NET, puedes utilizar la comunicación entre JavaScript y la aplicación .NET a través de mensajes.

    En tu código, estás inyectando un script JavaScript en tu WebView2 que captura el evento de clic del ratón y envía un mensaje al control WebView2. Luego, en el evento WebView1_WebMessageReceived, recibes el mensaje y ejecutas la lógica necesaria para manejar el clic del ratón.

    En tu ejemplo, parece que estás teniendo dificultades con la parte de la lógica en el evento WebView1_WebMessageReceived. La estructura JsonObject que estás utilizando en el ejemplo no parece coincidir con el JSON que estás enviando desde JavaScript. En el script JavaScript, estás enviando un objeto con una clave "mousedown" y un valor que contiene las coordenadas X e Y del clic del ratón. Por lo tanto, deberías ajustar la estructura JsonObject para que coincida con el formato del mensaje enviado desde JavaScript.

    Aquí te dejo un ejemplo de cómo podrías ajustar tu código para manejar el mensaje correctamente:

    vb
Structure JsonMessage
    Public Key As String
    Public Value As Point
End Structure

Private Sub WebView1_WebMessageReceived(ByVal sender As Object, ByVal e As CoreWebView2WebMessageReceivedEventArgs)
    Dim jsonMessage As JsonMessage = JsonConvert.DeserializeObject(Of JsonMessage)(e.WebMessageAsJson)

    If jsonMessage.Key = "mousedown" Then
        Dim mouseX As Integer = jsonMessage.Value.X
        Dim mouseY As Integer = jsonMessage.Value.Y

        ' Aquí puedes realizar la lógica para manejar el clic del ratón en las coordenadas mouseX y mouseY
    End If
End Sub

    Asegúrate de que la estructura JsonMessage coincida con el formato del mensaje enviado desde JavaScript y ajusta la lógica en el WebView1_WebMessageReceived para manejar el clic del ratón adecuadamente. Con estos ajustes, deberías poder detectar el clic del ratón en tu WebView2 correctamente.

    Respondida el Dec 19, 2020 a las 09:24 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución para detectar clics del ratón en WebView2

    1. Manejar eventos WebMessageReceived:

    Agrega el siguiente código para manejar eventos WebMessageReceived desde tu aplicación web JavaScript:

    csharp
private void WebView1_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    // Analiza el mensaje JSON
    var jsonObject = JsonConvert.DeserializeObject(e.WebMessageAsJson);

    // Maneja el evento de clic según la clave del mensaje
    switch (jsonObject.Key)
    {
        case "mousedown":
            // Obtiene las coordenadas del clic
            var x = jsonObject.Value.X;
            var y = jsonObject.Value.Y;

            // Realiza la acción deseada (por ejemplo, mostrar un menú contextual en las coordenadas del clic)
            break;
    }
}

    2. Inyectar JavaScript para enviar eventos de clic:

    Agrega el siguiente script JavaScript a tu página web para enviar eventos de clic como mensajes a la aplicación host:

    javascript
document.addEventListener('mousedown', function (event) {
    // Crea un objeto JSON con el evento de clic
    var jsonObject = {
        Key: 'mousedown',
        Value: {
            X: event.screenX,
            Y: event.screenY
        }
    };

    // Envía el mensaje JSON a la aplicación host
    window.chrome.webview.postMessage(jsonObject);
});

    3. Habilitar los mensajes de WebView:

    Para habilitar la recepción de mensajes de WebView, debes establecer la propiedad WebMessageReceived de WebView2 en true:

    csharp
webview1.WebMessageReceived += WebView1_WebMessageReceived;

    4. Agregar un script de inicialización a WebView:

    Para inyectar el script JavaScript en la página web, debes agregar un script de inicialización a WebView2 después de la navegación:

    csharp
private void Webview1_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
{
    webview1.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;
    var script = File.ReadAllText("d:\test_mouse.js");
    webview1.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(script);
}

    Nota: Asegúrate de reemplazar la ruta del archivo test_mouse.js con la ubicación del script JavaScript real que contiene el código de inyección.

    Código de muestra completo:

    csharp
using Microsoft.Web.WebView2.Core;
using Newtonsoft.Json;
using System.IO;

class MainWindow
{
    // Estructura para el objeto JSON que contiene los datos del clic
    struct JsonObject
    {
        public string Key;
        public Point Value;
    }

    async void InitializeSyncroComponent()
    {
        await webview1.EnsureCoreWebView2Async();
        webview1.CoreWebView2.Navigate("https://google.fr/");
        webview1.WebMessageReceived += WebView1_WebMessageReceived;
    }

    void WebView1_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
    {
        JsonObject jsonObject = JsonConvert.DeserializeObject(e.WebMessageAsJson);

        switch (jsonObject.Key)
        {
            case "mousedown":
                // Obtiene las coordenadas del clic
                var x = jsonObject.Value.X;
                var y = jsonObject.Value.Y;

                // Realiza la acción deseada (por ejemplo, mostrar un menú contextual)
                break;
        }
    }

    void Webview1_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs e)
    {
        webview1.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;
        var script = File.ReadAllText("d:\test_mouse.js");
        webview1.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(script);
    }
}

    Script JavaScript completo:

    javascript
document.addEventListener('mousedown', function (event) {
    var jsonObject = {
        Key: 'mousedown',
        Value: {
            X: event.screenX,
            Y: event.screenY
        }
    };
    window.chrome.webview.postMessage(jsonObject);
});

    Con este código, ahora puedes detectar clics del ratón en tu página web insertada en WebView2 y realizar las acciones deseadas en tu aplicación host.

    Respondida el Dec 19, 2020 a las 09:28 - por Gemini

    Votos positivos: 0 | Votos negativos: 0