在基于 CEF (Chromium Embedded Framework) 的开发中，实现 JavaScript 和 C++ 的双向交互是提升用户体验和功能灵活性的重要环节。CEF 提供了强大的 CefV8Context 和 CefV8Handler 接口，使开发者可以轻松地在 JavaScript 和 C++ 之间共享数据和调用功能。
本节将深入探讨如何将 C++ 函数暴露到 JavaScript 环境中，如何通过 JavaScript 调用本地 API，以及反向调用的实现方法，并结合最新技术提供详细的实现方案和优化建议。
1. CefV8Context 与 CefV8Handler：将 C++ 函数暴露到 JavaScript
1.1 CefV8Context 的作用
CefV8Context 表示 JavaScript 的执行环境。通过它，开发者可以访问 JavaScript 全局对象，将本地 C++ 方法绑定到 JavaScript 函数，供页面中的脚本调用。
1.2 创建 CefV8Handler 并绑定到 JavaScript
开发者需要实现一个继承自 CefV8Handler 的类，用于处理从 JavaScript 发起的调用。
示例代码：
class MyV8Handler : public CefV8Handler {
public:bool Execute(const CefString& name,CefRefPtr<CefV8Value> object,const CefV8ValueList& arguments,CefRefPtr<CefV8Value>& retval,CefString& exception) override {if (name == "myNativeFunction") {// 处理参数if (arguments.size() == 1 && arguments[0]->IsString()) {std::string arg = arguments[0]->GetStringValue();std::cout << "Received from JS: " << arg << std::endl;retval = CefV8Value::CreateString("Response from C++");return true;} else {exception = "Invalid arguments";return false;}}return false;}IMPLEMENT_REFCOUNTING(MyV8Handler);
};1.3 在 JavaScript 全局对象中注册函数
通过 CefRegisterExtension 方法将自定义扩展注册到 JavaScript 全局对象中。
示例代码：
CefRegisterExtension("v8/test","var myNativeFunction;""if (!myNativeFunction) myNativeFunction = function(arg) {"" native function myNativeFunction(arg);"" return myNativeFunction(arg);""};",new MyV8Handler());JavaScript 使用方式：
const result = myNativeFunction("Hello from JavaScript");
console.log(result); // 输出 "Response from C++"2. JavaScript 调用本地 C++ 函数
通过绑定的 CefV8Handler，JavaScript 可以直接调用本地 C++ 方法，通常用于以下场景：
- 与设备或系统的本地 API 交互。
- 获取动态数据并实时更新页面。
- 调用 C++ 提供的复杂计算逻辑。
2.1 参数传递与类型检查
CEF 支持的参数类型包括字符串、数字、布尔值、数组和对象。开发者需要在 CefV8Handler::Execute 方法中检查传入参数的类型和数量。
示例代码：
if (arguments.size() == 2 && arguments[0]->IsInt() && arguments[1]->IsString()) {int id = arguments[0]->GetIntValue();std::string message = arguments[1]->GetStringValue();// 执行本地逻辑
}2.2 异步调用的支持
如果调用涉及异步任务（例如网络请求或文件操作），可以返回 Promise 给 JavaScript。
示例代码：
CefPostTask(TID_FILE, base::Bind([]() {// 执行异步任务CefPostTask(TID_RENDERER, base::Bind([]() {// 通知 JavaScript}));
}));在 JavaScript 中：
async function callNativeAsync() {const result = await myNativeFunction("data");console.log(result);
}3. 反向通信：本地 C++ 调用 JavaScript
在许多情况下，主程序需要通知页面 JavaScript，例如处理异步事件或更新页面内容。C++ 可以通过访问 CefV8Context 实现这种通信。
3.1 获取 JavaScript 上下文并执行函数
C++ 可以通过 CefFrame::GetMainFrame 获取页面的上下文，并调用 JavaScript 函数。
示例代码：
void CallJavaScriptFunction(CefRefPtr<CefBrowser> browser, const std::string& funcName, const std::string& data) {CefRefPtr<CefFrame> frame = browser->GetMainFrame();CefRefPtr<CefV8Context> context = frame->GetV8Context();if (context->Enter()) {CefRefPtr<CefV8Value> global = context->GetGlobal();CefRefPtr<CefV8Value> func = global->GetValue(funcName);if (func && func->IsFunction()) {CefV8ValueList args;args.push_back(CefV8Value::CreateString(data));func->ExecuteFunction(global, args);}context->Exit();}
}3.2 在页面注册接收函数
页面 JavaScript 定义一个接收 C++ 数据的函数：
function onNativeMessage(data) {console.log("Received from C++:", data);
}C++ 调用此函数：
CallJavaScriptFunction(browser, "onNativeMessage", "Hello from C++");3.3 使用 IPC 配合数据传递
如果调用需要与主进程或其他进程交互，可结合 IPC 机制传递数据到渲染进程后再调用 JavaScript。
4. 双向交互的优化与最佳实践
-
线程安全性 JavaScript 和 C++ 的交互可能涉及多个线程，开发者需要使用 CEF 提供的任务调度方法（如
CefPostTask）确保代码在正确的线程上运行。 -
参数验证与错误处理 在 C++ 中严格验证 JavaScript 传递的参数，避免非法输入导致崩溃。
-
性能优化
- 避免频繁的跨进程通信，可通过批量传递数据或消息合并减少通信次数。
- 使用高效的序列化方法（如 JSON 或 Protocol Buffers）传递复杂数据结构。
-
安全性
- 限制暴露给 JavaScript 的 C++ 方法范围，避免潜在的安全风险。
- 使用沙箱机制隔离页面运行环境，防止恶意脚本对系统造成破坏。
总结
通过 CEF 提供的强大工具，开发者可以轻松实现 JavaScript 和 C++ 的双向交互。结合实际场景设计合理的交互接口和机制，不仅可以提升程序的功能性和用户体验，还可以为后续功能扩展提供良好的基础。
关于作者：
15年物联网开发、带过10-20人的团队，多次帮助公司从0到1完成项目开发，在TX等大厂都工作过。当下为退役状态，写此篇文章属个人爱好。本人10多年开发经验期间手机了很多开发课程等资料，需要可联系我
