1. 前言
随着 Web 技术的发展，使用网页内容（HTML、JavaScript、CSS 等）作为桌面应用程序的一部分变得越来越常见。在 C# WinForm 中，Microsoft 提供的 WebView2 控件让我们可以轻松地嵌入 Chromium 浏览器，并实现 C# 与 JavaScript 的互操作。本文将详细介绍如何在 WinForm 项目中集成 WebView2 控件，并实现 C# 和 JavaScript 的双向调用。
2. 前置准备
- 安装 WebView2 Runtime（Windows 11 默认包含）。
- 在项目中添加 WebView2 控件。
- 安装 Microsoft.Web.WebView2 NuGet 包，以支持 WebView2 控件的功能。
3. 初始化 WebView2 控件
在 WinForm 中添加 WebView2 控件并初始化，确保其加载本地或远程的 HTML 文件。
using Microsoft.Web.WebView2.Core;
using System;
using System.Windows.Forms;namespace WebView2InteropDemo
{public partial class Form1 : Form{public Form1(){InitializeComponent();InitializeAsync();}private async void InitializeAsync(){await webView21.EnsureCoreWebView2Async(null);string htmlFilePath = System.IO.Path.Combine(AppContext.BaseDirectory, "index.html");
webView21.Source = new Uri($"file:///{htmlFilePath.Replace("\", "/")}");}}
}
4. JavaScript 调用 C# 方法
实现 JavaScript 调用 C# 的方法需要以下几个步骤：
- 注册一个 C# 对象，使得 JavaScript 可以访问。
- 在 C# 中实现可以调用的公开方法。
- 在 JavaScript 中通过
window.chrome.webview.postMessage向 C# 发送消息。
C# 端代码
在 WebView2 初始化完成后，可以向 JavaScript 注入一个 C# 对象，提供供调用的方法：
// C# 代码：注册可供 JavaScript 调用的对象
public partial class Form1 : Form
{public Form1(){InitializeComponent();InitializeAsync();}private async void InitializeAsync(){await webView21.EnsureCoreWebView2Async(null);webView21.CoreWebView2.WebMessageReceived += WebView2_WebMessageReceived;string htmlFilePath = System.IO.Path.Combine(AppContext.BaseDirectory, "index.html");
webView21.Source = new Uri($"file:///{htmlFilePath.Replace("\", "/")}");}private void WebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e){string message = e.WebMessageAsJson; // 获取来自 JavaScript 的消息MessageBox.Show("Received message from JavaScript: " + message);}// 向 JavaScript 发送消息的 C# 方法public void SendMessageToJavaScript(string message){webView21.CoreWebView2.PostWebMessageAsString(message);}
}
JavaScript 端代码
在 HTML 文件中，通过 window.chrome.webview.postMessage 向 C# 发送消息。首先确保页面加载后，C# 已成功注册监听事件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebView2 JS to C# Interop</title>
</head>
<body><h1>JavaScript to C# Interop</h1><button onclick="sendMessageToCSharp()">Send Message to C#</button><script>function sendMessageToCSharp() {// 通过 WebView2 的 postMessage 将消息发送给 C#window.chrome.webview.postMessage("Hello from JavaScript!");}</script>
</body>
</html>
在此示例中，点击按钮将调用 JavaScript 中的 sendMessageToCSharp() 函数，该函数通过 window.chrome.webview.postMessage 向 C# 发送消息，C# 收到消息后在弹窗中显示接收到的内容。
5. C# 调用 JavaScript 方法
在某些情况下，我们希望从 C# 向 JavaScript 发送消息或调用 JavaScript 函数。可以使用 ExecuteScriptAsync 方法实现此功能。
C# 端代码
在 C# 端调用 ExecuteScriptAsync 来执行 JavaScript 代码：
// C# 代码：向 JavaScript 发送消息
public void CallJavaScriptFunction()
{string script = "displayMessageFromCSharp('Hello from C#');";webView21.CoreWebView2.ExecuteScriptAsync(script);
}
JavaScript 端代码
在 JavaScript 中实现一个函数，用于处理 C# 传递的数据：
<script>function displayMessageFromCSharp(message) {alert("Message from C#: " + message);}
</script>
当 C# 调用 CallJavaScriptFunction 方法时，将执行 JavaScript 函数 displayMessageFromCSharp，并弹出一个消息框显示从 C# 传递的消息。
6. 交互过程总结
- JavaScript 调用 C#：
- 通过使用
window.chrome.webview.postMessage将消息发送到 C#。 - C# 使用
WebMessageReceived事件接收消息，并在需要时执行相应操作。
- C# 调用 JavaScript：
- 通过使用
ExecuteScriptAsync方法执行 JavaScript 代码。 - JavaScript 端实现处理函数，接受从 C# 传递的消息或参数，并做出响应。
7.完整项目构建汇总
1、新增项目WebView2InteropDemo，并且引入依赖库
引入依赖库
根据操作系统版本，引入WebView2.Runtime.X64
<Project Sdk="Microsoft.NET.Sdk"><PropertyGroup><OutputType>WinExe</OutputType><TargetFramework>net8.0-windows</TargetFramework><Nullable>disable</Nullable><UseWindowsForms>true</UseWindowsForms><ImplicitUsings>enable</ImplicitUsings></PropertyGroup><ItemGroup><PackageReference Include="WebView2.Runtime.X64" Version="130.0.2849.80" /></ItemGroup><ItemGroup><None Update="index.html"><CopyToOutputDirectory>Always</CopyToOutputDirectory></None></ItemGroup></Project>
2、新增Form1窗体，构建布局
Form1.Designer.cs代码
namespace WebView2InteropDemo
{partial class Form1{/// <summary>/// Required designer variable./// </summary>private System.ComponentModel.IContainer components = null;/// <summary>/// Clean up any resources being used./// </summary>/// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>protected override void Dispose(bool disposing){if (disposing && (components != null)){components.Dispose();}base.Dispose(disposing);}#region Windows Form Designer generated code/// <summary>/// Required method for Designer support - do not modify/// the contents of this method with the code editor./// </summary>private void InitializeComponent(){webView21 = new Microsoft.Web.WebView2.WinForms.WebView2();btnCallJsFunc = new Button();((System.ComponentModel.ISupportInitialize)webView21).BeginInit();SuspendLayout();// // webView21// webView21.AllowExternalDrop = true;webView21.CreationProperties = null;webView21.DefaultBackgroundColor = Color.White;webView21.Dock = DockStyle.Fill;webView21.Location = new Point(0, 34);webView21.Name = "webView21";webView21.Size = new Size(800, 416);webView21.TabIndex = 0;webView21.ZoomFactor = 1D;// // btnCallJsFunc// btnCallJsFunc.Dock = DockStyle.Top;btnCallJsFunc.Location = new Point(0, 0);btnCallJsFunc.Name = "btnCallJsFunc";btnCallJsFunc.Size = new Size(800, 34);btnCallJsFunc.TabIndex = 1;btnCallJsFunc.Text = "Call Js Func";btnCallJsFunc.UseVisualStyleBackColor = true;btnCallJsFunc.Click += btnCallJsFunc_Click;// // Form1// AutoScaleDimensions = new SizeF(11F, 24F);AutoScaleMode = AutoScaleMode.Font;ClientSize = new Size(800, 450);Controls.Add(webView21);Controls.Add(btnCallJsFunc);Name = "Form1";StartPosition = FormStartPosition.CenterScreen;Text = "Form1";((System.ComponentModel.ISupportInitialize)webView21).EndInit();ResumeLayout(false);}#endregionprivate Microsoft.Web.WebView2.WinForms.WebView2 webView21;private Button btnCallJsFunc;}
}
Form1.cs
using Microsoft.Web.WebView2.Core;namespace WebView2InteropDemo
{public partial class Form1 : Form{public Form1(){InitializeComponent();InitializeAsync();}private async void InitializeAsync(){await webView21.EnsureCoreWebView2Async(null);webView21.CoreWebView2.WebMessageReceived += WebView2_WebMessageReceived;string htmlFilePath = System.IO.Path.Combine(AppContext.BaseDirectory, "index.html");webView21.Source = new Uri($"file:///{htmlFilePath.Replace("\", "/")}");}private void WebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e){string message = e.WebMessageAsJson;MessageBox.Show("Received message from JavaScript: " + message);}public void SendMessageToJavaScript(string message){webView21.CoreWebView2.PostWebMessageAsString(message);}public void CallJavaScriptFunction(){string script = "displayMessageFromCSharp('Hello from C#');";webView21.CoreWebView2.ExecuteScriptAsync(script);}private void btnCallJsFunc_Click(object sender, EventArgs e){CallJavaScriptFunction();}}
}
3、编写html内嵌web网页代码
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebView2 JS to C# Interop</title>
</head>
<body><h1>JavaScript to C# Interop</h1><button onclick="sendMessageToCSharp()">Send Message to C#</button><script>function sendMessageToCSharp() {window.chrome.webview.postMessage("Hello from JavaScript!");}function displayMessageFromCSharp(message) {alert("Message from C#: " + message);}</script>
</body>
</html>
4、执行结果
JS函数调C#函数代码
C#函数调用JS函数
8.总结
WebView2 的互操作功能使我们能够将现代 Web 技术无缝集成到 WinForm 应用程序中。通过本文介绍的方法，可以实现 JavaScript 和 C# 的双向调用，使得 WinForm 应用程序可以有效地利用 Web 内容和桌面功能，满足更复杂的业务需求。
