如何实现CEF中的JS交互？

CEF（Chromium Embedded Framework）与JavaScript交互，通过C++编写的绑定实现。

在现代软件开发中，Chromium Embedded Framework（CEF）作为一种强大的嵌入式浏览器框架，广泛应用于需要集成网页浏览功能的桌面应用中，CEF不仅提供了丰富的浏览器功能，还允许开发者通过JavaScript与底层的C++代码进行交互，从而实现复杂的业务逻辑和界面控制。

CEF与JS交互

CEF与JavaScript的交互主要通过V8 JavaScript引擎实现，该引擎为每个frame提供了一个独立的上下文（context），用于执行JavaScript代码，CEF暴露了一系列接口，使得C++代码可以调用JavaScript函数，同时也允许JavaScript代码触发C++方法，这种双向交互极大地增强了应用的灵活性和功能性。

C++调用JavaScript

1. 直接执行JavaScript代码

CEF允许C++代码直接在指定的frame中执行JavaScript代码，这通常通过CefFrame::ExecuteJavaScript方法实现。

CefRefPtr<CefFrame> frame = browser->GetMainFrame();
frame->ExecuteJavaScript("alert('Hello from C++!');", frame->GetURL(), 0);

这种方法适用于简单的脚本执行，但无法获取JavaScript函数的返回值。

2. 使用CefV8Handler执行JavaScript函数并获取返回值

为了调用JavaScript函数并获取其返回值，可以使用CefV8Handler类，需要创建一个继承自CefV8Handler的类，并实现其Execute方法，通过CefV8Context的Enter和Exit方法来管理V8上下文的进入和退出。

以下是一个示例：

class MyV8Handler : public CcefV8Handler {
public:
    bool Execute(const CefString& name,
                CefRefPtr<CefV8Value> object,
                const CefV8ValueList& arguments,
                CefRefPtr<CefV8Value>& retval,
                CefString& exception) override {
        // 假设我们有一个名为'add'的JavaScript函数，它接收两个参数并返回它们的和
        if (name == "add") {
            int arg1 = arguments.size() > 0 ? arguments[0]->GetIntValue() : 0;
            int arg2 = arguments.size() > 1 ? arguments[1]->GetIntValue() : 0;
            retval = CefV8Value::CreateInt(arg1 + arg2);
            return true;
        }
        return false;
    }
};
// 在某个地方调用
CefRefPtr<MyV8Handler> handler(new MyV8Handler());
CefRefPtr<CefV8Context> context = ...; // 获取V8上下文
context->Enter();
handler->Execute("add", nullptr, {CefV8Value::CreateInt(10), CefV8Value::CreateInt(20)}, retval, exception);
context->Exit();
if (!exception.empty()) {
    // 处理异常
} else {
    int result = retval->GetIntValue();
    // 使用结果
}

JavaScript调用C++

1. 注册全局对象和方法

为了使JavaScript能够调用C++方法，可以在Render进程中注册全局对象和方法，这通常在CefRenderProcessHandler::OnWebKitInitialized方法中完成，以下是一个示例：

void MyRenderProcessHandler::OnWebKitInitialized() {
    std::string extensionCode = R"(
        var myNativeMethods = {
            showMessage: function(message) {
                nativeFunctions.showMessage(message);
            },
            add: function(a, b) {
                return nativeFunctions.add(a, b);
            }
        };
        window.myNativeMethods = myNativeMethods;
    )";
    CefRegisterExtension("v8/extern", extensionCode, new MyJSHandler());
}

在这个示例中，extensionCode定义了两个全局函数showMessage和add，它们分别映射到C++端的相应方法。CefRegisterExtension用于注册这个扩展，以便在页面加载时自动执行。

2. 创建JavaScript绑定类

另一种方法是创建一个JavaScript绑定类，该类封装了所有需要暴露给JavaScript的方法，以下是一个简化的示例：

class MyJSBindings : public CefV8Value {
public:
    explicit MyJSBindings(CefRefPtr<MyV8Handler> handler) : handler_(handler) {}
    // 重写Create方法以初始化绑定对象
    static void Create(CefRefPtr<CefV8Context> context, CefRefPtr<MyJSBindings>& bindings) {
        CefRefPtr<MyV8ValueObj> obj = CefV8Value::CreateObject(nullptr, nullptr);
        obj->SetValue("showMessage", CefV8Value::CreateFunction("showMessage"), V8_PROPERTY_ATTRIBUTE_NONE);
        obj->SetValue("add", CefV8Value::CreateFunction("add"), V8_PROPERTY_ATTRIBUTE_NONE);
        bindings = new MyJSBindings(handler);
        bindings->Wrap(obj);
    }
private:
    CefRefPtr<MyV8Handler> handler_;
};

在这个示例中，MyJSBindings类封装了一个或多个需要暴露给JavaScript的方法，通过重写Create方法，可以将这些方法绑定到JavaScript对象上。

表格对比：C++调用JS与JS调用C++

CEF与JavaScript的交互为开发者提供了极大的灵活性和强大的功能，使得桌面应用能够充分利用Web技术的优势，这种交互也带来了一定的复杂性和潜在的安全风险，在实际开发中，建议仔细评估需求，合理设计架构，并采取必要的安全措施以确保应用的稳定性和安全性。

FAQs

Q1: C++调用JavaScript时如何获取返回值？

A1: 要获取JavaScript函数的返回值，需要使用CefV8Handler类，通过继承CefV8Handler并实现其Execute方法，可以在该方法中处理JavaScript函数的调用并获取返回值，需要使用CefV8Context的Enter和Exit方法来管理V8上下文的进入和退出，具体实现可以参考上述“使用CefV8Handler执行JavaScript函数并获取返回值”的部分。

Q2: JavaScript调用C++时如何确保线程安全？

A2: JavaScript调用C++时，由于JavaScript运行在渲染进程的主线程中，而C++代码可能运行在不同的线程中，因此需要确保线程安全，一种常见的做法是使用消息传递机制，即JavaScript通过某种方式（如自定义事件、消息队列等）将调用请求发送到C++端，C++端在适当的线程中处理这些请求，并将结果返回给JavaScript，还可以使用互斥锁（如std::mutex）来保护共享资源，防止并发访问导致的数据不一致问题，在设计交互逻辑时，应充分考虑线程安全问题，避免潜在的竞态条件和死锁等问题。

小伙伴们，上文介绍了“cef js交互”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。