WebView2简单试用(八)—— 右键菜单

摘要:
屏蔽webview2的右键单击菜单定义WPF控件的右键菜单,以根据右键单击位置获取WebView上下文信息。WPF控件自定义的右键菜单window.chrome.webview.postMessage(段落)根本无法显示;await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(脚本);

默认菜单:

WebView2本身携带了类似Edge的右键菜单,但有的时候我们需要对它进行一些修改。

WebView2简单试用(八)—— 右键菜单第1张

禁止dev菜单

    webView.CoreWebView2.Settings.AreDevToolsEnabled = false;

WebView2简单试用(八)—— 右键菜单第2张

禁止所有菜单

    webView.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;

自定义菜单

自定义菜单我最初预想的实现的方式是:

  1. 屏蔽webview2本身的右键菜单
  2. 定义WPF控件的右键菜单
  3. 根据右键点击的位置获取WebView上下文信息,显示相应的菜单

然而,实现的时候遇到了一些麻烦:WPF的WebView2是吃掉了所有的鼠标右键事件的,根本无法显示WPF控件自定义的右键菜单,后来查阅了一下相关文章,一般实现的方式如下:

1. 首先定义脚本文档menu.js,该脚本的功能为:订阅右键菜单事件contextmenu,将位置信息发送给host程序,同时屏蔽本身的右键菜单。

document.addEventListener('contextmenu'function (event) {
let para =
    {
        Key: 'contextmenu',
        Pos:
        {
            X: event.x,
            Y: event.y,
        }
    };
    event.preventDefault();
    window.chrome.webview.postMessage(para);
});

2. Host程序在前端注入该js,并在接收到位置信息的时候显示自定义的右键菜单。

    var script = await File.ReadAllTextAsync(@"menu.js");
    await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(script);

    webView.WebMessageReceived += (se) =>
    {
        var pos = JObject.Parse(e.WebMessageAsJson)["Pos"];

        menu.PlacementTarget  = webView;
        menu.IsOpen           = true;
        menu.Placement        = PlacementMode.Relative;
        menu.HorizontalOffset = pos["X"].Value<double>();
        menu.VerticalOffset   = pos["Y"].Value<double>();
    };

做到这一步时,已经可以在WPF程序中显示自己的右键菜单了。需要注意的是这里的contextmenu的显示方法。

实际应用场景中,往往需要根据上下文动态显示不同的菜单,这个就需要我们在contextmenu回调函数中传入更多的信息了,event参数是一个MouseEvent类型的对象,它本身就有不少属性可以直接传出来供我们使用。也可以通过document.elementFromPoint等js函数计算出上下文信息回传回来。

这里的关键点是contextmenu的上下文消息传递,我们也可以使用AddHostObjectToScript的方式嵌入回调函数代替webmessage的,再前端直接调用host程序的显示菜单的函数,实现起来可能更简单些。

参考文档:

免责声明:文章转载自《WebView2简单试用(八)—— 右键菜单》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇一、SAP中添加一个模块到收藏夹后,显示事务代码排查tomcat服务器CPU占用率过高的问题下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JavaScript——Firebug控制台详解

转载至:http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html 作者: 阮一峰 控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息。 一、显示信息的命令 Firebug内置一个console对象,提供5种方法,用...

go语言实现限流器

本文:https://chai2010.cn/advanced-go-programming-book/ch5-web/ch5-06-ratelimit.html Ratelimit 服务流量限制 计算机程序可依据其瓶颈分为磁盘IO瓶颈型,CPU计算瓶颈型,网络带宽瓶颈型,分布式场景下有时候也会外部系统而导致自身瓶颈。 Web系统打交道最多的是网络,无论是...

[转]重建损坏的Windows Management Instrumentation(WMI)服务

安装SQL Server 2008 ,出现WMI服务错误。 解决方法,网上罗列两种: 一、重建损坏的Windows Management Instrumentation(WMI)服务(测试通过)@echo on cd /d c:\temp if not exist %windir%\system32\wbem goto TryInstall cd /d %...

Wireshark——工具

一、基本信息统计工具 1)捕获文件属性(Summary) 1. File:了解抓包文件的各种属性,例如抓包文件的名称、路径、文件所含数据包的规模等信息 2. Time:获悉抓包的开始、结束和持续时间 3. Capture:抓包文件由哪块网卡生成、OS版本、Wireshark版本等信息 4. Display:剩下的是汇总统计信息,数据包的总数、数量以及占比情...

CentOS8 几个关机重启的命令

shutdown 是安全的方式关闭系统。 shutdown -k  +5                      并非真正关机,只是向用户发出警告信息“离关机还有五分钟” shutdown -k                           向用户发出警告信息“离关机还有一分钟”,默认延时一分钟。 shutdown -h           ...

解决 java命令行运行class文件时报“错误:找不到或无法加载主类”

问题描述: 今天准备开始复习一下jvm参数,在 perfma 社区里正好有这么一个小课程:https://club.perfma.com/course 从第一节开始复习时,大佬在课后留了一个问题,所以最好自己在java命令行中运行验证一下。结果没想到就碰到了“错误:找不到或无法加载主类”这个问题。 程序都没运行起来,怎么验证jvm参数啊??? 于是前后耗时...