CEF3与JS交互，如何实现高效无缝的通信？

在现代软件开发中，CEF（Chromium Embedded Framework）作为一种强大的嵌入式浏览器框架，广泛应用于需要嵌入网页浏览功能的桌面应用程序中，而JavaScript作为前端开发的核心语言，与CEF的交互变得尤为重要，本文将深入探讨CEF3中的JS交互机制，包括执行JavaScript、窗口绑定、扩展以及基本的JS类型处理等内容，帮助开发者更好地理解和应用这些技术。

一、CEF3中的JavaScript交互

CEF3使用V8 JavaScript引擎来执行内部的JavaScript代码，每个Frame在浏览器进程中都有一个属于自己的JS上下文，在这个上下文中提供了一个安全和有限的环境来执行JS代码，CEF3对外提供了丰富的JS特征，使得客户端应用程序能够方便地与JavaScript进行交互。

二、执行JavaScript

在CEF3中执行JavaScript最简单的方法是使用CefFrame::ExecuteJavaScript()函数，该函数可以在浏览器和渲染进程中使用，并且能在JS上下文之外执行，以下代码将在浏览器的主Frame中弹出一个消息框：

CefRefPtr<CefBrowser> browser = ...;
CefRefPtr<CefFrame> frame = browser->GetMainFrame();
frame->ExecuteJavaScript("alert('ExecuteJavaScript works!');", frame->GetURL(), 0);

ExecuteJavaScript()函数用于与函数和变量交互框架的JS上下文，如果需要将JS返回结果传递到客户端应用，可以使用窗口绑定或扩展。

三、窗口绑定

窗口绑定允许客户端应用程序将值附加到一个框架窗口对象上，这通过实现CefRenderProcessHandler::OnContextCreated()方法来实现，每当新的渲染进程被初始化时，该方法会被调用。

以下是一个窗口绑定的示例：

void MyRenderProcessHandler::OnContextCreated(
    CefRefPtr<CefBrowser> browser,
    CefRefPtr<CefFrame> frame,
    CefRefPtr<CefV8Context> context) {
    // 获取全局window对象
    CefRefPtr<CefV8Value> object = context->GetGlobal();
    // 创建一个新的V8字符串值
    CefRefPtr<CefV8Value> str = CefV8Value::CreateString("My Value!");
    // 将字符串添加到window对象中，键名为"myval"
    object->SetValue("myval", str, V8_PROPERTY_ATTRIBUTE_NONE);
}

在HTML文件中，可以通过以下JavaScript代码访问这个绑定的值：

<script language="JavaScript">
    alert(window.myval); // 显示一个带有"My Value!"的消息框
</script>

窗口绑定每次重新加载或重新加载框架时都会给客户端应用程序提供修改绑定的机会，不同的框架可能被允许使用不同的客户端应用特性，通过修改与该框架的窗口对象绑定的值来实现。

四、扩展

扩展与窗口绑定类似，但区别在于扩展在每个框架的上下文中加载后不能修改，当扩展加载后DOM不存在，并且在扩展加载期间试图访问DOM会导致崩溃，扩展使用CefRegisterExtension()函数注册，该函数在CefRenderProcessHandler::OnWebKitInitialized()方法中调用。

以下是一个扩展的示例：

void MyRenderProcessHandler::OnWebKitInitialized() {
    // 定义扩展内容
    std::string extensionCode =
        "var test;"
        "if (!test)"
        "  test = {};"
        "(function() {"
        "  test.myval = 'My Value!';"
        "})();";
    // 注册扩展
    CefRegisterExtension("v8/test", extensionCode, NULL);
}

在HTML文件中，可以通过以下JavaScript代码访问这个扩展的值：

<script language="JavaScript">
    alert(test.myval); // 显示一个带有"My Value!"的消息框
</script>

五、基本的JS类型

CEF支持创建多种基本的JS数据类型，包括undefined、null、bool、int、double、date和string，这些类型使用CefV8Value::Create*()静态方法创建，创建一个JS string类型使用CreateString()方法：

CefRefPtr<CefV8Value> str = CefV8Value::CreateString("My Value!");

基本值类型可以在任何时候创建，并且不需要首先与特定的上下文关联，检测值类型使用Is*()方法：

CefRefPtr<CefV8Value> val = ...;
if (val.IsString()) {
    // 该值是一个字符串
}

获取变量的值使用Get*Value()方法。

六、异步通信与回调

在CEF3中，JavaScript与C++之间的交互不仅限于同步执行，还支持异步通信，这种通信方式类似于进程间通信，但实现在主进程和子进程之间，它利用了cef_message_router.h中的CefMessageRouterBrowserSide和CefMessageRouterRendererSide，这种功能在单进程模式和多进程模式下都可以使用，非常强大。

以下是一个简单的异步通信示例：

1、在渲染进程中注册JavaScript函数：在CefRenderProcessHandlerImpl::OnWebKitInitialized()方法中注册一个C++方法给JavaScript调用。

void CefRenderProcessHandlerImpl::OnWebKitInitialized() {
    std::string app_code =
        "var app;"
        "if (!app)"
        "  app = {};"
        "(function() {"
        "  app.sendMessage = function(name, arguments) {"
        "    native function sendMessage();"
        "    return sendMessage(name, arguments);"
        "  };"
        "})();";
    // 注册JavaScript函数，该函数将被C++调用
    app.registerJavascriptFunction = function(name, callback) {"
        "native function registerJavascriptFunction();"
        "return registerJavascriptFunction(name, callback);"
        "};"
    "})();";
    // 注册扩展模块
    CefRegisterExtension("v8/app", app_code, m_v8Handler);
}

2、在C++中实现回调：在CefV8HandlerImpl::Execute()方法中实现sendMessage和registerJavascriptFunction方法，当JavaScript调用这些方法时，会触发相应的C++代码。

class CefV8HandlerImpl : public CefV8Handler {
public:
    CefV8HandlerImpl() {}
    ~CefV8HandlerImpl() {}
    virtual bool Execute(const CefString& name, CefRefPtr<CefV8Value> object, const CefV8ValueList& arguments, CefRefPtr<CefV8Value>& retval, CefString& exception) override {
        if (name == "sendMessage") {
            // 处理sendMessage逻辑
            // ...
            return true;
        } else if (name == "registerJavascriptFunction") {
            // 处理registerJavascriptFunction逻辑
            // ...
            return true;
        }
        return false;
    }
};

通过这种方式，可以实现JavaScript与C++之间的异步通信，使得双方能够更加灵活地交互。

CEF3为开发者提供了强大的JavaScript交互能力，通过执行JavaScript、窗口绑定、扩展以及基本的JS类型处理等方式，实现了JavaScript与C++之间的无缝通信，CEF3还支持异步通信与回调机制，进一步增强了交互的灵活性和效率，随着技术的不断发展，我们可以预见CEF3在未来将会提供更多的功能和优化，为开发者带来更好的开发体验。

各位小伙伴们，我刚刚为大家分享了有关“cef3 js交互”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！