如何在WebView2中实现点击网页时自动隐藏menustrip下拉菜单

实现逻辑 #

WebView2采用独立渲染进程，和宿主WinForms窗体的消息循环隔离，因此点击网页区域不会触发原生MenuStrip的失焦关闭事件。你可以通过WebView2提供的宿主对象注入能力，把.NET侧的菜单关闭方法暴露给网页JS调用，实现点击网页自动关闭下拉菜单的效果。 #

1. VB.NET端实现暴露给JS的调用方法 #

首先创建可被COM访问的互操作类，封装菜单关闭逻辑，再将该类实例注入到WebView2的JS上下文：

前置依赖 #

确保项目已经通过NuGet安装Microsoft.Web.WebView2包，导入所需命名空间：

Imports Microsoft.Web.WebView2.WinForms
Imports System.Runtime.InteropServices

编写JS互操作类 #

' 必须标记ComVisible为True才能被JS正常调用
<ComVisible(True)>
Public Class JsHostApi
    ' 存储宿主窗体实例，用于访问窗体上的MenuStrip控件
    Private ReadOnly _hostForm As Form ' 替换为你实际的窗体类名
    Public Sub New(hostForm As Form)
        _hostForm = hostForm
    End Sub
    ''' <summary>
    ''' 关闭MenuStrip所有展开的下拉菜单，该方法可直接被JS调用
    ''' </summary>
    Public Sub CloseAllMenuDropdown()
        Dim targetMenuStrip = _hostForm.MenuStrip1 ' 替换为你窗体上MenuStrip控件的实际名称
        For Each item As ToolStripItem In targetMenuStrip.Items
            If TypeOf item Is ToolStripMenuItem Then
                Dim menuItem = CType(item, ToolStripMenuItem)
                If menuItem.HasDropDownItems AndAlso menuItem.DropDown.Visible Then
                    menuItem.DropDown.Close(ToolStripDropDownCloseReason.AppClicked)
                End If
            End If
        Next
    End Sub
End Class

WebView2初始化时注入宿主对象 #

在窗体加载事件中等待WebView2初始化完成后，注册互操作对象：

Private Async Sub MainForm_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    ' 初始化WebView2核心运行时
    Await WebView21.EnsureCoreWebView2Async()
    ' 注入互操作对象，JS中可通过window.chrome.webview.hostObjects.hostApi访问
    WebView21.CoreWebView2.AddHostObjectToScript("hostApi", New JsHostApi(Me))
End Sub

2. 网页端JS调用.NET方法关闭菜单 #

在嵌入的网页JS中监听全局点击事件，点击非MenuStrip区域时调用暴露的.NET方法：

// 监听全局点击事件
document.addEventListener('click', (e) => {
    // 替换为你页面上MenuStrip容器的实际选择器，判断点击是否在菜单区域内
    const isClickInMenu = e.target.closest('#menu-strip-container');
    if (!isClickInMenu) {
        // 调用.NET端暴露的关闭菜单方法
        window.chrome.webview.hostObjects.hostApi.CloseAllMenuDropdown();
    }
});
// 可选：监听右键点击事件，右键点击网页也关闭菜单
document.addEventListener('contextmenu', (e) => {
    const isClickInMenu = e.target.closest('#menu-strip-container');
    if (!isClickInMenu) {
        window.chrome.webview.hostObjects.hostApi.CloseAllMenuDropdown();
    }
});

内容的提问来源于stack exchange，提问作者user3025401