在.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”提供了一个基础模板,你可以根据实际需求进行扩展和调整。
1