如何使用CefSharp.js与C交互并传递参数？

CefSharp JS与C#交互参数详解

在现代桌面应用程序开发中，通过嵌入浏览器组件来实现丰富的用户界面和动态内容展示已成为一种常见的设计模式，CefSharp作为一个强大的.NET封装库，使得在.NET应用中集成Chromium Embedded Framework（CEF）变得简单而高效，本文将深入探讨如何在CefSharp环境中实现C#与JavaScript之间的参数传递，包括详细的步骤、示例代码以及常见问题解答。

一、CefSharp与JavaScript交互基础

在CefSharp中，C#与JavaScript的交互主要依赖于ChromiumWebBrowser类的ExecuteScriptAsync和EvaluateScriptAsync方法，前者用于异步执行JavaScript代码，无返回值；后者则不仅执行代码，还能获取JavaScript函数的返回值。

1. 异步执行JavaScript（无返回值）

使用ExecuteScriptAsync方法可以方便地在C#中调用JavaScript函数，该方法的使用方式类似于JavaScript中的eval，要调用一个名为exampleFunction的JavaScript函数，可以这样做：

browser.ExecuteScriptAsync("exampleFunction()");

如果需要向JavaScript函数传递参数，可以通过字符串插值或字符串连接的方式实现：

string param1 = "Hello";
int param2 = 123;
browser.ExecuteScriptAsync($"exampleFunction('{param1}', {param2})");

2. 异步执行并获取返回值

当需要获取JavaScript函数的返回值时，可以使用EvaluateScriptAsync方法，该方法返回一个Task<CefSharp.JavascriptResponse>对象，通过该对象的Result属性可以获取返回值。

Task<CefSharp.JavascriptResponse> t = browser.EvaluateScriptAsync("return exampleFunction();");
t.Wait(); // 等待JavaScript函数执行完成
if (t.Result.Result != null)
{
    string result = t.Result.Result.ToString();
    MessageBox.Show(result);
}

对于需要传递多个参数的情况，同样可以通过字符串插值或字符串连接来构建JavaScript函数调用语句：

string param1 = "World";
bool param2 = true;
Task<CefSharp.JavascriptResponse> t = browser.EvaluateScriptAsync($"return exampleFunction('{param1}', {param2});");
t.Wait();
if (t.Result.Result != null)
{
    string result = t.Result.Result.ToString();
    MessageBox.Show(result);
}

二、JavaScript调用C#方法并传递参数

除了C#调用JavaScript外，CefSharp还支持JavaScript调用C#方法，并传递参数，这通常通过将C#对象注册为JavaScript对象来实现。

1. 注册C#对象为JavaScript对象

定义一个包含需要被JavaScript调用的方法的C#类，一个简单的消息显示类：

public class JsEvent
{
    public string MessageText = string.Empty;
    public void ShowTest()
    {
        MessageBox.Show("this in C#.
r" + MessageText);
    }
}

在C#中实例化该类并注册为JavaScript对象：

var jsEvent = new JsEvent();
browser.RegisterJsObject("jsEvent", jsEvent);

注意，注册过程应放在浏览器控件加入窗体之前，否则可能导致网页无法调用已注册的对象。

2. JavaScript调用C#方法并传递参数

在JavaScript中，可以直接通过注册的对象名调用C#方法，并传递参数。

function CallCSharpMethod() {
    jsEvent.MessageText = "Hello from JS";
    jsEvent.ShowTest();
}

这段JavaScript代码设置了JsEvent对象的MessageText属性，并调用了其ShowTest方法，从而触发了C#中的消息框显示。

三、复杂参数传递与对象映射

在实际应用中，有时需要传递复杂的参数或对象给JavaScript函数，这时，可以将C#对象序列化为JSON字符串，然后在JavaScript端反序列化，反之亦然，从JavaScript传递回来的复杂对象也需要在C#端进行反序列化处理。

1. C#对象传递给JavaScript

假设有一个复杂的C#对象需要传递给JavaScript：

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}
Person person = new Person { Name = "Alice", Age = 30 };
string json = System.Text.Json.JsonSerializer.Serialize(person);
browser.ExecuteScriptAsync($"receivePerson({json})");

在JavaScript中，可以定义一个receivePerson函数来接收这个对象：

function receivePerson(personObj) {
    console.log(personObj.Name, personObj.Age);
}

2. JavaScript对象传递给C#

从JavaScript传递复杂对象到C#，同样需要使用JSON序列化，假设JavaScript中有一个对象：

var person = { Name: "Bob", Age: 25 };
window.external.receivePerson(person);

在C#中，可以定义一个对应的receivePerson方法来接收这个对象：

[System.Runtime.InteropServices.ComVisible(true)]
public void receivePerson(string personJson)
{
    var person = System.Text.Json.JsonSerializer.Deserialize<Person>(personJson);
    MessageBox.Show($"Received: {person.Name}, {person.Age}");
}

四、注意事项与最佳实践

线程安全：由于CefSharp的大多数方法都是异步的，且可能在非UI线程上执行，因此在操作UI元素时需要注意线程安全性，可以使用Invoke方法将UI操作切换到UI线程。

错误处理：在调用JavaScript或处理返回值时，应添加必要的错误处理逻辑，以应对可能出现的异常情况。

性能优化：频繁的C#与JavaScript交互可能会影响性能，尤其是在传递大量数据时，可以考虑批量处理或使用更高效的数据格式（如二进制）。

安全性：当允许JavaScript调用C#方法时，应谨慎处理传入的参数，避免执行恶意代码或泄露敏感信息。

五、FAQs

**Q1: CefSharp中如何实现C#与JavaScript之间的双向通信？

A1: 在CefSharp中，实现C#与JavaScript之间的双向通信主要通过两种手段：一是使用ExecuteScriptAsync或EvaluateScriptAsync方法从C#调用JavaScript；二是通过RegisterJsObject方法将C#对象暴露给JavaScript，从而实现JavaScript调用C#方法，还可以利用objectForScripting等机制在JavaScript中直接访问C#对象。

Q2: CefSharp中如何处理JavaScript传递过来的复杂对象？

A2: 在CefSharp中处理JavaScript传递过来的复杂对象时，通常的做法是将对象序列化为JSON字符串进行传递，在C#端，可以使用JSON库（如System.Text.Json或Newtonsoft.Json）将JSON字符串反序列化为相应的C#对象，这样可以方便地处理包含多个属性和方法的复杂对象。

六、小编有话说

CefSharp作为一款强大的.NET封装库，为开发者提供了便捷的浏览器嵌入和脚本交互能力，通过掌握C#与JavaScript之间的参数传递技巧，我们可以构建出更加灵活和动态的桌面应用程序，随着技术的发展和用户需求的变化，我们也应不断关注新的特性和最佳实践，以提升开发效率和用户体验，希望本文能为大家在使用CefSharp进行C#与JavaScript交互时提供有益的参考和帮助。