如何在WPF中使用CefSharp嵌入JavaScript功能？

在WPF应用程序中，CefSharp是一个强大的工具，它允许开发者将Chromium浏览器嵌入到WPF应用中，通过CefSharp，我们不仅能够加载网页，还可以实现C#与JavaScript之间的交互，这种交互方式使得桌面应用能够充分利用Web技术的优势，提供更丰富和动态的用户界面体验。

一、基本概念

CefSharp是一个基于Chromium的开源库，支持在WPF应用程序中嵌入Chromium浏览器引擎，通过这个库，开发者可以在WPF应用中直接加载网页，并与网页中的JavaScript进行双向通信，这意味着你可以在C#代码中调用JavaScript函数，反之亦然。

二、实现步骤

1. 安装CefSharp

需要在项目中安装CefSharp库，可以通过NuGet包管理器搜索并安装CefSharp.Wpf组件，安装完成后，需要将项目的CPU平台设置为x86，并将目标框架设置为.NET Framework 4.5或更高版本。

<PackageReference Include="CefSharp.Wpf" Version="90.6.70" />

2. 创建WPF项目

创建一个新的WPF项目，并在XAML文件中引入CefSharp命名空间：

xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"

在XAML中添加一个ChromiumWebBrowser控件：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp"
        xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        mc:Ignorable="d"
        Title="CefSharp WPF Example" Height="450" Width="800">
    <Grid>
        <cefSharp:ChromiumWebBrowser x:Name="myChrome" Address="https://www.example.com" />
    </Grid>
</Window>

3. 配置JavaScript对象

在C#代码中，我们需要配置一个JavaScript对象，以便在JavaScript中调用C#方法，这可以通过RegisterJsObject方法实现：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.myChrome.MenuHandler = new MenuHandler(); // 去掉右键菜单
        this.myChrome.Address = "https://www.example.com";
        this.myChrome.JavascriptObjectRepository.Register("csharpTest", new JavascriptCallCSharp(), true, BindingOptions.DefaultBinder);
    }
    public class JavascriptCallCSharp
    {
        public void ShowMsg(string data)
        {
            MessageBox.Show($"当前时间：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}，数据：{data}");
        }
    }
}

4. JavaScript调用C#方法

在JavaScript中，我们可以通过注册的对象调用C#方法，假设我们在网页中有如下按钮点击事件：

<button onclick="callCSharpMethod()">调用C#方法</button>

对应的JavaScript代码如下：

function callCSharpMethod() {
    window.csharpTest.showMsg("来自JS的调用");
}

5. C#调用JavaScript方法

在C#代码中，我们可以通过ExecuteScriptAsync方法调用JavaScript函数：

private void CallJSFunc_Click(object sender, RoutedEventArgs e)
{
    myChrome.GetBrowser().MainFrame.ExecuteScriptAsync("window.jsFunction('Hello from C#')");
}

对应的JavaScript代码如下：

function jsFunction(message) {
    alert("JS收到来自C#的消息：" + message);
}

三、常见问题解答（FAQs）

Q1：如何在C#中获取JavaScript函数的返回值？

A1：可以使用EvaluateScriptAsync方法来获取JavaScript函数的返回值，示例如下：

Task<CefSharp.JavascriptResponse> t = myChrome.GetBrowser().MainFrame.EvaluateScriptAsync("callTest2()");
t.Wait();
if (t.Result.Result != null)
{
    MessageBox.Show(t.Result.Result.ToString());
}

Q2：如何传递复杂的JSON对象从C#到JavaScript？

A2：可以将JSON对象转换为字符串，然后传递给JavaScript，示例如下：

string json = "{"name":"John", "age":30}";
myChrome.GetBrowser().MainFrame.ExecuteScriptAsync($"displayJson({json})");

四、小编有话说

通过CefSharp，WPF应用程序可以轻松地与JavaScript进行交互，极大地扩展了桌面应用的功能和用户体验，无论是简单的数据交换还是复杂的双向通信，CefSharp都提供了强大的支持，希望本文能帮助大家更好地理解和使用CefSharp，在WPF开发中发挥出更大的作用，如果有任何疑问或建议，欢迎留言讨论！