WebView2控件应用详解系列博客
.NET混合开发解决方案2 WebView2与Edge浏览器的区别
.NET混合开发解决方案5 WebView2运行时与分发应用
.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件
.NET混合开发解决方案8 WinForm程序中通过设置固定版本运行时的BrowserExecutableFolder属性集成WebView2控件
Edge浏览器中的网页,点击鼠标右键,出现上下文菜单及子菜单,如下图
WebView2控件加载网页后,鼠标在网页上点击右键,也会出现上下文菜单,如下图
对比可以看出WebView2控件中的右键上下文菜单内容比Edge浏览器中网页的右键右键上下文菜单的数量少。结合我的博客《.NET混合开发解决方案2 WebView2与Edge浏览器的区别》可知,WebView2控件中对于网页右键上下文菜单做了裁剪。
在企业级应用软件开发中,可能有以下几种种常有且实用的需求
使用 webView2.CoreWebView2.ExecuteScriptAsync() 方法执行JS脚本即可实现禁用右键菜单
await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('contextmenu', window => {window.preventDefault();});");
或者通过C#编码禁用右键菜单
webView2.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;
有的开发者小伙伴会说,我在网页中写JS也可以禁用右键上菜单,确实如此
function document.oncontextmenu() { return false; } function nocontextmenu() { if(document.all) { event.cancelBubble=true; event.returnvalue=false; return false; } }
但是通过WebView2进行控制,一方面不改变网页本身的功能,另一方面可以统一控制网页右键菜单的启用与禁用。
通过WebView2能禁用右键菜单,理论上也可以自定义右键菜单。WebView2提供了丰富的API供开发者使用,参考微软官方文档《自定义 WebView2 中的上下文菜单》,可以实现自定义的右键菜单。
关于右键菜单的术语
与WebView2控件右键菜单相关的事件、类、属性与枚举
CoreWebView2ContextMenuItemKind 枚举
CoreWebView2ContextMenuItemKind.Command
CoreWebView2ContextMenuItemKind.Separator
指示为目标属性创建上下文菜单的上下文种类。此枚举将始终表示导致上下文菜单请求的活动元素。例如,如果有一个包含多个图像、音频和文本的选择,最终用户在此选择中右键单击的元素将是此枚举表示的选项。
CoreWebView2ContextMenuItemKind 枚举
CheckBox
Radio
Separator
Submenu
首先获取WebView2控件的默认右键菜单列表,查看每一项的具体属性信息。通过注册WebView2的ContextMenuRequested事件,使用事件参数CoreWebView2ContextMenuRequestedEventArgs中提供的数据来显示包含所选条目的自定义上下文菜单。
默认提供12个右键菜单项(包含分隔符),调试代码查看每个菜单项信息,如下
观察12个菜单项,可以发现以下规律
一般的应用程序保留【返回】、【前进】、【刷新】三个菜单项即可满足。此时就需要删除其他的菜单项。实现逻辑如下
1 private void CoreWebView2_ContextMenuRequested(object? sender, CoreWebView2ContextMenuRequestedEventArgs args) 2 { 3 IList<CoreWebView2ContextMenuItem> allMenuList = args.MenuItems; 4 5 var itemOfSaveAs = allMenuList.FirstOrDefault(x => x.Name == "saveAs"); 6 if (itemOfSaveAs != null) 7 allMenuList.Remove(itemOfSaveAs); 8 9 var itemOfPrint = allMenuList.FirstOrDefault(x => x.Name == "print"); 10 if (itemOfPrint != null) 11 allMenuList.Remove(itemOfPrint); 12 13 var itemOfCreateQRCode = allMenuList.FirstOrDefault(x => x.Label == "为此页面创建 QR 代码"); 14 if (itemOfCreateQRCode != null) 15 allMenuList.Remove(itemOfCreateQRCode); 16 17 var itemOfShare = allMenuList.FirstOrDefault(x => x.CommandId == 50460); 18 if (itemOfShare != null) 19 allMenuList.Remove(itemOfShare); 20 21 var itemOfSaveInspectElement = allMenuList.FirstOrDefault(x => x.Name == "inspectElement"); 22 if (itemOfSaveInspectElement != null) 23 allMenuList.Remove(itemOfSaveInspectElement); 24 }
测试效果如下图
现在只有【返回】、【前进】、【刷新】菜单项了,但是最后还有一条分割线。
调试代码可知目前还有7个菜单项,其中第4,5,6,7项都是分割线。在12个原始菜单项中就包含有四个分割线,所以此处需要删除这4个分割线
修改逻辑代码
再次测试,效果如下图
如果是清空所有的菜单项就比较简单了,直接清空右键菜单列表
IList<CoreWebView2ContextMenuItem> allMenuList = args.MenuItems; allMenuList.Clear();//清空所有的默认菜单项
上述第二个场景中保留了【返回】、【前进】、【刷新】三个菜单项,满足大多数场景的需求。考虑一些极端情况,系统需要统一实现自定义的右键菜单功能。
通过一个简单的示例来演示如何实现自定义WebView2 中的上下文菜单。
场景:在第二个场景的基础之上,增加2个自定义右键菜单项。
先看下实现效果
同样需要在WebView2控件的ContextMenuRequested事件中实现
private void CoreWebView2_ContextMenuRequested(object? sender, CoreWebView2ContextMenuRequestedEventArgs args) { IList<CoreWebView2ContextMenuItem> allMenuList = args.MenuItems; PopulateContextMenu(args, allMenuList); }
其中添加菜单项的逻辑如下
CoreWebView2ContextMenuItem 类不能直接实例化,需要使用 webView2.CoreWebView2.Environment.CreateContextMenuItem() 类创建一个菜单对象。CreateContextMenuItem() 方法中传递三个参数
1、菜单项的名称。如果是分割线,则设置为空字符串。
2、菜单项的图标,是文件流对象。如果不设置,则赋值为null。
3、菜单项的类型,包含Command(命令按钮)、CheckBox(复选框)、Radio(单选框)、Separator(分割线)、Submenu(子菜单)。
程序中我设置了CheckBox,但是运行后没有生效,暂时不知道什么原因。如有小伙伴研究出来了,可以分享一下。
菜单项还有Label、CommandId属性,但是只读,无法赋值
调试程序可以看到,创建菜单时,CommandId的值是自动分配的,Label的值与Name相同。
ContextMenuRequested
事件。当应用检测到此事件时,应用应执行以下操作的一些组合:将自定义菜单项添加到默认上下文菜单。该 ContextMenuRequested
事件指示用户请求打开上下文菜单。
WebView2 控件引发此事件,指示用户请求在 WebView2 控件中打开上下文菜单,例如右键单击。
仅当前网页允许显示上下文菜单时,WebView2 控件才会引发 ContextMenuRequested
事件,即 AreDefaultContextMenusEnabled
= true
时引发该事件。
CoreWebView2ContextMenuRequestedEventArgs 包含以下信息:
要填充自定义上下文菜单的 ContextMenuItem
对象的有序列表。 已排序列表包括以下内容:
Alt+C
)。请求上下文菜单的坐标,以便应用可以检测用户右键单击的 UI 项。 坐标是根据 WebView2 控件的左上角定义的。
包含所选上下文类型的选择对象 和相应的上下文菜单参数数据。
当用户在上下文菜单上选择自定义菜单项时,WebView2 控件将触发 CustomItemSelected
事件,开发者在该事件中可以自定义业务逻辑。