.net winform 利用webview2实现嵌入的网页浏览器网页缩放效果

时间: 2024-12-14 14:22:25 浏览: 6

RAR

WinForm下WebView2实现JS与C#交互Demo

在.NET Framework或.NET Core的Windows Forms（WinForm）应用程序中，常常需要集成Web视图以展示网页内容，并可能需要与网页中的JavaScript代码进行交互。微软提供了WebView2控件，它是Chromium内核的新一代Web视图，使得在WinForm应用中实现与现代Web技术的集成变得更加容易。本示例“WinForm下WebView2实现JS与C#交互Demo”就展示了如何在C#中使用WebView2控件来实现JavaScript与C#之间的双向通信。确保已安装Microsoft Edge WebView2 SDK。可以通过NuGet包管理器安装`Microsoft.WebView2.WinForms`包。安装完成后，在WinForm项目中引入`Microsoft.WebView2.WinForms`命名空间，这样就可以使用WebView2控件。接着，在WinForm设计器中添加一个WebView2控件到窗体上，并在代码中初始化它。初始化通常包括设置初始URL、加载完成后的回调以及设置用户数据目录，以便WebView2存储本地缓存和用户数据： ```csharp private Microsoft.WebView2.WinForms.WebView2 webView2; private async void Form1_Load(object sender, EventArgs e) { webView2 = new Microsoft.WebView2.WinForms.WebView2(); webView2.Dock = DockStyle.Fill; Controls.Add(webView2); // 设置初始URL webView2.Source = new Uri("https://example.com"); // 加载完成事件 webView2.CoreWebView2InitializationCompleted += (sender, args) => { // 设置用户数据目录 webView2.CoreWebView2.Environment = await Microsoft.WebView2.Core.CoreWebView2Environment.CreateAsync(null, null); }; } ``` 接下来，实现JS与C#的交互。通过`AddScriptToExecuteOnDocumentCreated`方法，可以在网页加载时执行一段JavaScript代码，这段代码可以注册一个全局函数，用于调用C#方法： ```csharp private void RegisterJsCallCSharp() { webView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync( "window.callCSharp = function(param) { window.chrome.webview.postMessage(param); }"); } ``` 这里定义了一个`callCSharp`函数，当JavaScript需要调用C#方法时，可以调用这个函数并传递参数。为了接收JavaScript的postMessage，我们需要监听`WebMessageReceived`事件，然后在事件处理程序中解析接收到的消息并调用相应的C#方法： ```csharp private async void WebView2_CoreWebView2/WebMessageReceived(object sender, Microsoft.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs e) { string message = e.Message.ToString(); await webView2.CoreWebView2.ExecuteScriptAsync($"console.log('C# received: {message}');"); // 调用C#方法处理接收到的消息 ProcessMessage(message); } ``` 同时，C#也可以调用JavaScript代码。使用`ExecuteScriptAsync`方法可以执行任意JavaScript代码： ```csharp private async void CallJsFunctionFromCSharp(string functionName, params object[] args) { StringBuilder script = new StringBuilder(); script.Append(functionName); script.Append("("); for (int i = 0; i < args.Length; i++) { if (i > 0) script.Append(","); script.Append(JsonConvert.SerializeObject(args[i])); } script.Append(");"); await webView2.CoreWebView2.ExecuteScriptAsync(script.ToString()); } ``` 这个`CallJsFunctionFromCSharp`方法接受一个函数名和任意数量的参数，将其序列化为JSON字符串并拼接成JavaScript调用语句。通过以上步骤，我们已经在WinForm应用中实现了WebView2控件的集成，让JavaScript可以调用C#方法，同时C#也能调用JavaScript函数。这在开发涉及网页和桌面应用交互的场景中非常有用，例如，你可以从网页触发桌面应用的功能，或者从桌面应用更新网页的内容。这个“WinForm下WebView2实现JS与C#交互Demo”提供了一个基础模板，你可以根据实际需求进行扩展和调整。

.NET WinForms中的WebView2是一个现代化的Web内容呈现控件，它允许你在Windows应用程序中像浏览器一样显示网页。要实现网页的缩放效果，你可以按照以下步骤操作： 1. 首先，确保已经安装了.NET Framework，并在项目中引用`Microsoft.Web.WebView2.WinForms` NuGet包。 2. 在WinForm中添加WebView2控件到窗体上： ```xml <Windows.Web.WebView2.WinForms.WebView2 x:Name="webView" Margin="10,10,10,10" Width="800" Height="600"/> ``` 3. 使用C#代码设置初始加载URL并启用缩放功能： ```csharp webView.NavigateToString("<html>这是演示页面</html>"); webView.ZoomLevel = 100; // 设置初始缩放级别为100%，可以根据需要调整 webView.ContentZoomLevelChanged += WebView_ContentZoomLevelChanged; // 注册缩放事件处理 private void WebView_ContentZoomLevelChanged(object sender, WebView2ContentZoomChangedEventArgs e) { // 当用户缩放时，此事件会被触发，这里可以获取新的缩放比例并更新UI反馈 } ``` 4. 当用户通过键盘快捷键、鼠标滚轮或者控件提供的API手动缩放时，`WebView_ContentZoomLevelChanged`事件会通知你新的缩放比例。 5. 对于响应用户的缩放请求，例如改变缩放级别或提供自定义缩放功能，可以在事件处理程序中进行相应的逻辑，比如： ```csharp private async void zoomButton_Click(object sender, EventArgs e) { int newZoomLevel = webView.ZoomLevel + 10; // 改变缩放级别，这里是增加10% await webView.SetZoomAsync(newZoomLevel); } ```

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通