如何实现CEF与JavaScript之间的高效交互？

CEF与JS交互

CEF（Chromium Embedded Framework）是一个开源的框架，它允许开发者将Chromium浏览器嵌入到自己的应用程序中，通过使用V8 JavaScript引擎，CEF提供了丰富的JavaScript执行环境，使得C++代码和JavaScript之间可以进行复杂的交互操作，本文将详细探讨CEF与JavaScript之间的交互机制，包括如何在CEF中执行JavaScript脚本、设置JavaScript变量以及提供函数给JavaScript调用。

一、在CEF中执行JavaScript脚本

在CEF中执行JavaScript脚本是最常见的需求之一，当你需要拦截一个URL请求并将其重定向到另一个URL时，可以通过调用pFrame->ExecuteJavaScript方法来执行相应的JavaScript代码，以下是一个示例代码：

CefRefPtr<CefFrame> pFrame = browser->GetMainFrame();
std::string strurl = pFrame->GetURL().ToString();
std::string strname = pFrame->GetName().ToString();
if (pFrame->GetURL() == "https://10.19.141.75/portal/") {
    pFrame->ExecuteJavaScript(
        "var param= { url:'https://10.19.141.75/ishelf-web/personalCenter' }; "
        "window.goToApp(param);"
        "var paramEx = { isExtend:true };"
        "window.extendScreen(paramEx);",
        pFrame->GetURL(), 0);
}

在这个例子中，当检测到当前页面的URL为特定值时，会执行一段JavaScript代码来实现跳转并扩展屏幕的功能。

二、窗口绑定方式实现CEF设置JavaScript变量

窗口绑定方式是一种常用的在CEF中设置JavaScript变量的方法，通过创建一个CefV8Value对象，并将其注入到窗口对象中，网页中的JavaScript就可以访问这个变量，以下是具体的实现步骤：

1、获取上下文的全局对象：在CefRenderProcessHandler::OnContextCreated函数中获取当前frame的上下文全局对象。

2、创建新的V8字符串值：使用CefV8Value::CreateString方法创建一个V8字符串值。

3、将字符串添加到窗口对象：将创建的字符串值作为属性添加到全局对象中。

示例代码如下：

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

这样，在网页中的JavaScript就可以通过window.myval访问到这个变量了。

alert(window.myval); // 弹出一个对话框显示 "My Value!"

三、扩展方式（Extension）实现CEF设置JavaScript变量

扩展方式与窗口绑定方式类似，但扩展方式是在初始化阶段通过注册扩展来实现的，这种方式适用于需要在每个frame加载时就设置一些固定的变量或函数的情况，具体步骤如下：

1、定义扩展内容：编写一段JavaScript代码作为扩展内容。

2、注册扩展：在CefRenderProcessHandler::OnWebKitInitialized函数中使用CefRegisterExtension方法注册扩展。

示例代码如下：

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

在网页中的JavaScript可以通过test.myval访问这个变量：

alert(test.myval); // 弹出一个对话框显示 "My Value!"

四、窗口绑定方式实现CEF给JavaScript提供函数

除了设置变量外，还可以通过自定义类实现CefV8Handler接口，将C++函数提供给JavaScript调用，以下是具体的实现步骤：

1、：创建一个继承自CefV8Handler的类，并实现其Execute方法。

2、注册函数：在CefRenderProcessHandler::OnContextCreated函数中注册函数到窗口对象。

3、调用函数：在JavaScript中调用注册的函数。

示例代码如下：

class MyV8Handler : public CefV8Handler {
public:
    MyV8Handler() {}
    virtual bool Execute(const CefString& name, CefRefPtr<CefV8Value> object, const CefV8ValueList& arguments, CefRefPtr<CefV8Value>& retval, CefString& exception) OVERRIDE {
        if (name == "sayHello") {
            retval = CefV8Value::CreateString("Hello from C++");
            return true;
        }
        return false;
    }
};

void MyRenderProcessHandler::OnContextCreated(CefRefPtr<CefBrowser> browser, CefRefPtr<CefFrame> frame, CefRefPtr<CefV8Context> context) {
    // 注册函数到窗口对象
    context->GetGlobal()->SetValue("sayHello", CefV8Value::CreateFunction("sayHello", new MyV8Handler()), V8_PROPERTY_ATTRIBUTE_NONE);
}

在网页中的JavaScript可以这样调用：

alert(sayHello()); // 弹出一个对话框显示 "Hello from C++"

五、FAQs

1、如何在CEF中执行JavaScript脚本？

可以使用pFrame->ExecuteJavaScript方法在指定的frame中执行JavaScript脚本。

     pFrame->ExecuteJavaScript("alert('Hello from C++');", pFrame->GetURL(), 0);

2、如何在CEF中设置JavaScript变量？

可以通过窗口绑定方式或扩展方式来设置JavaScript变量，窗口绑定方式是在OnContextCreated函数中将变量注入到窗口对象；扩展方式是在OnWebKitInitialized函数中注册扩展。

     void MyRenderProcessHandler::OnContextCreated(CefRefPtr<CefBrowser> browser, CefRefPtr<CefFrame> frame, CefRefPtr<CefV8Context> context) {
         CefRefPtr<CefV8Value> str = CefV8Value::CreateString("My Value!");
         context->GetGlobal()->SetValue("myval", str, V8_PROPERTY_ATTRIBUTE_NONE);
     }

六、小编有话说

CEF与JavaScript之间的交互为开发者提供了极大的灵活性，使得C++应用程序能够充分利用Web技术的优势，在实际开发过程中，还需要注意以下几点：

安全性：由于C++代码可以直接执行JavaScript，因此需要确保传入的JavaScript代码是安全的，避免执行恶意代码。

性能问题：频繁的跨语言调用可能会带来性能开销，特别是在处理大量数据时，建议仅在必要时进行交互，并尽量优化代码。

兼容性：不同版本的CEF可能在某些细节上有所不同，因此在升级CEF版本时需要注意兼容性问题，建议查阅官方文档或社区资源以获取最新的信息和支持。