cefsharp wpf C#监听JavaScript事件

看官方文档比中文百度效果好太多,使用cefsharp强烈建议看官方文档,FAQ中可能就有你的问题。
最近做的一个WPF项目,嵌入cefsharp控件加载html,实现百度地图显示和交互,在地图上利用百度地图api添加了Marker,我需要点击marker执行C#的事件,marker的监听事件是JS事件,cefsharp执行事件使用函数ExecuteJavaScriptAsync,获取事件返回值使用函数EvaluateScriptAsync,可当点击marker发生的JS事件是通过事件监听实现的,而JS中addEventListener是没有返回值的,故cefsharp采用了message进行交互,html中代码如下

var point = new BMapGL.Point(longtitude, latitude);
			var myIcon = new BMapGL.Icon(url, new BMapGL.Size(10, 15));
			var marker = new BMapGL.Marker(point, {
				icon: myIcon
			});
			marker.setTitle(id);
			// 将标注添加到地图
			var infoWindow = new BMapGL.InfoWindow(id, point);
			map.addOverlay(marker);
			marker.addEventListener('click', clickListener);
			function clickListener(e) {
				if (e.target instanceof BMapGL.Marker) {
					CefSharp.PostMessage(e.target.getTitle());
				}
			}

我们只需要在每次事件发生时向cefsharp发送message就能是实现C#后台对事件的监听
C#部分代码,browser是cefsharp浏览器对象,已经进行过初始化,这两个事件会对浏览器加载和获取message进行监听

browser.JavascriptMessageReceived += OnBrowserJavascriptMessageReceived;
browser.FrameLoadEnd += OnFrameLoadEnd;
public void OnFrameLoadEnd(object sender, FrameLoadEndEventArgs e)
		{
			if (e.Frame.IsMain)
			{
			    //执行Js的监听事件
				newMap.ExecuteScriptAsync("clickListener();");
			}
		}
//C#接收html发送的消息
		private void OnBrowserJavascriptMessageReceived(object sender, JavascriptMessageReceivedEventArgs e)
		{
			var windowSelection = e.Message.ToString();
			//拿到消息说明执行了Js事件并发过来消息,在下面做要处理的事情即可
			//DO SOMETHING WITH THIS MESSAGE
			//This event is called on the threads pool, to access your UI thread
			//You can cast sender to ChromiumWebBrowser
			//use Control.BeginInvoke/Dispatcher.BeginInvoke
		}

https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions
官网第13个问题

  1. How do you handle a Javascript event in C#?
    For basic communication you can use CefSharp.PostMessage(message); in Javascript to send a message to .Net which triggers the browser.JavascriptMessageReceived event.
// After your ChromiumWebBrowser instance has been instantiated (for WPF directly after `InitializeComponent();` in the control constructor).
// Subscribe to the following events
browser.JavascriptMessageReceived += OnBrowserJavascriptMessageReceived;
browser.FrameLoadEnd += OnFrameLoadEnd;

public void OnFrameLoadEnd (object sender, FrameLoadEndEventArgs e)
{
  if(e.Frame.IsMain)
  {
    //In the main frame we inject some javascript that's run on mouseUp
	//You can hook any javascript event you like.
	browser.ExecuteScriptAsync(@"
	  document.body.onmouseup = function()
	  {
		//CefSharp.PostMessage can be used to communicate between the browser
		//and .Net, in this case we pass a simple string,
		//complex objects are supported, passing a reference to Javascript methods
		//is also supported.
		//See https://github.com/cefsharp/CefSharp/issues/2775#issuecomment-498454221 for details
		CefSharp.PostMessage(window.getSelection().toString());
	  }
	");
  }
}

private void OnBrowserJavascriptMessageReceived(object sender, JavascriptMessageReceivedEventArgs e)
{
	var windowSelection = (string)e.Message;
	//DO SOMETHING WITH THIS MESSAGE
	//This event is called on the threads pool, to access your UI thread
        //You can cast sender to ChromiumWebBrowser
	//use Control.BeginInvoke/Dispatcher.BeginInvoke
}
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
cefsharp wpf是一个用于在WPF应用程序中嵌入Chromium浏览器的开源项目。通过在XAML文件中添加引用和控件,可以在WPF应用程序中使用ChromiumWebBrowser控件来显示网页内容。具体的步骤如下: 1. 在XAML文件的头部插入以下引用: xmlns:wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf" 这个引用是为了能够使用CefSharp.Wpf命名空间中的控件。 2. 在XAML文件中添加一个Grid控件,并给它一个名称,比如"ctrlBrowerGrid"。 3. 在Grid控件中添加一个ChromiumWebBrowser控件,并给它一个名称,比如"Browser"。 通过以上步骤,你就可以在WPF应用程序中使用CefSharp.Wpf中的ChromiumWebBrowser控件来显示网页内容了。在MainWindow.xaml文件中的修改示例中,就是按照以上步骤进行的修改。\[1\]\[2\] 另外,如果你想在应用程序启动时自动显示UI,可以在App.xaml文件中进行配置。这个文件定义了WPF应用程序以及任意应用程序资源。你可以在此文件中指定在应用程序启动时自动显示的UI,比如MainWindow.xaml。\[3\] #### 引用[.reference_title] - *1* [WPFCefSharp的使用](https://blog.csdn.net/u014541617/article/details/107772258)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [【小沐学C#WPF中嵌入web网页控件(WebBrowser、WebView2、CefSharp)](https://blog.csdn.net/hhy321/article/details/129272302)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值