如何检测 webview2 中的鼠标点击（c#/vb.net）

Posted 2023-02-15

【中文标题】如何检测 webview2 中的鼠标点击（c#/vb.net）

【英文标题】：How detect a mouse click in webview2 (c#/vb.net)

【发布时间】：2021-03-28 22:46:02

【问题描述】：

我尝试获取 html 元素的点击事件。 使用我使用的 WebBrowser：

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

但是对于 Webview2，我没有找到好的做法。我必须注入一个javascript代码吗？ 但是，如何在 C# 或 Vb.net 应用程序中获取处理程序？

非常感谢。

这里是一个示例代码。我的函数中没有返回：WebView1_WebMessageReceived。为什么 ？ 我想，我忘记了什么......

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

脚本 Java：

document.addEventListener('mousedown', function (event)

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

编辑： 我发现我的错误... 真的不多！

我忘记了 webview 属性中的 WebMessageReceived 声明。

【问题讨论】：

这能回答你的问题吗？ How do you override the ContextMenu that appears when right clicking on WebView2 Control?

您尚未添加事件处理程序（在 VB.Net 中）。此外，您希望将 mousedown 更改为 click（所有位置 - 在 VB 代码和 javascript 中）。现在你应该在点击时得到一个事件。

非常感谢您的回复。我添加了事件处理程序，但我不确定语法。我添加了：“AddHandler webview1.CoreWebView2.WebMessageReceived，AddressOf WebView1_WebMessageReceived”。但我有一个错误。你能帮我吗？

我无法猜测，显示错误以及您在代码中的位置。

刚刚注意到：您已经从结构中注释掉了 Value - 那么您还必须从 javascript 中注释掉 Value。

【参考方案1】：

好的，我不知道 VB.Net，但你似乎能够翻译 C# 代码，所以我将尝试在 C# 中创建一个简单的工作解决方案：

首先，从 Nuget 下载 Microsoft.Web.WebView2 和 Newtonsoft.Json 并安装到您的项目中（您可能已经这样做了）。

现在将 WebView2 放到表单上 - 然后在 Property Inspector 中：

将源设置为：'https://google.fr/'

双击CoreWebView2InitializationCompleted 和WebMessageReceived 事件以在您的代码中创建骨架。

现在将这段代码添加到 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<JsonObject>(e.WebMessageAsJson);
            switch (jsonObject.Key)
            
                case "click":
                    MessageBox.Show(jsonObject.Value);
                    break;

            
        
    

现在在您的项目目录中创建一个 javascript 文件 ('Mouse.js')，选择该文件并在 Property Inspector 中选择 复制到输出目录 并选择：Copy if newer。这意味着，您的 VB 程序可以使用相对链接找到您的 javascript 文件。

现在将以下 javascript 粘贴到文件中：

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);
);

现在，当您运行它时，您应该会看到一个消息框，显示您单击的元素的 Name、ID 或 Tag Name（按此顺序）。

更新：

将CoreWebView2Readyevent 更改为CoreWebView2InitializationCompleted。这是该活动的新名称。它使用CoreWebView2InitializationCompletedEventArgs作为 eventArgs。

【讨论】：

谢谢，我知道这段代码。不过忘了说你，是wpf应用，不是form应用。

不是同一个代码，注意CoreWebView2Ready事件的使用。