CEF：C++和JS交互

C++和JS交互V8原理：​​https://github.com/fanfeilong/cefutil/blob/master/doc/content_register_v8_extension.md​​

CEF一个页面的框架如下图所示：

CefBrowser:一个普通的浏览器页面（HTML）

CefFrame:每一个页面都由至少一个frame组成，最顶层的为mainframe

context：JS执行环境，每个frame都有自己独立的context，CEF中使用V8JavaScriptEngine解析和执行JS代码

CEF 中的JavaScript

• CEF 利用 V8 JS 引擎来实现 JS。
• 浏览器中的每一个 frame 都有自己的 JS 上下文，JS 只能在该上下文中执行。
• JS 只能在渲染进程中的 TID_RENDERER 线程中执行。
• 有关 JS 回调的接口都包含在 CefRenderProcessHandler 中，因此我们要实现这个接口来对 JS 进行扩展。这个接口一般由 CefApp 实现。

C++调用JS

事实上cef本身支持直接执行js（js代码或者js函数）的接口，原型如下：

///
  // Execute a string of JavaScript code in this frame. The |script_url|
  // parameter is the URL where the script in question can be found, if any.
  // The renderer may request this URL to show the developer the source of the
  // error.  The |start_line| parameter is the base line number to use for error
  // reporting.
  ///
  /*--cef(optional_param=script_url)--*/
  virtual void ExecuteJavaScript(const CefString& code,
                                 const CefString& script_url,
                                 int start_line) = 0;

  ///class CefV8Value，此时可以获取返回值
  // Execute the function using the current V8 context. This method should only
  // be called from within the scope of a CefV8Handler or CefV8Accessor
  // callback, or in combination with calling Enter() and Exit() on a stored
  // CefV8Context reference. |object| is the receiver ('this' object) of the
  // function. If |object| is empty the current context's global object will be
  // used. |arguments| is the list of arguments that will be passed to the
  // function. Returns the function return value on success. Returns NULL if
  // this method is called incorrectly or an exception is thrown.
  ///
  /*--cef(optional_param=object)--*/
  virtual CefRefPtr<CefV8Value> ExecuteFunction(
      CefRefPtr<CefV8Value> object,
      const CefV8ValueList& arguments) = 0;

1.ExecuteJavaScript 可以直接执行JS函数，但是没有办法获取返回值。

//@param js js代码或者函数，
//eg:js="add(1,2)"
void CBrowserHandler::ExeJs(const CefString &js)
{
  ...
  browser->GetMainFrame()->ExecuteJavaScript(js, L"", 0);
  ...
}

#######################################C++调用JS测试，直接通过ExeJs("add(10,20)")调用JS函数####################
//JS:
function call_add(val1,val2)
{
  alert(window.add(val1,val2));
}

//C++
...
if (m_browser_app)
  m_browser_app->ExeJs(L"call_add(10,20)");
...

2、ExecuteFunction需要配合V8Context一起执行。执行之前需要context->Enter()，完成之后context->Exit()

V8Context分为两种情况:

1. 使用自己保存的V8Context （Render进程使用）
2. 使用全局的V8Context （Render进程使用）

//获取局部保存的Context，并且执行Js函数
CefRefPtr<CefV8Context> context = m_map_call_back[iMsgID].first;
CefRefPtr<CefV8Value> call_back = m_map_call_back[iMsgID].second;
if (context && call_back)
{
  context->Enter();
  if (context->GetBrowser())
  {
    CefV8ValueList call_arguments;
    call_arguments.push_back(CefV8Value::CreateString(args->GetString(2)));
    if (call_back->IsFunction())
      call_back->ExecuteFunction(NULL, call_arguments);
  }
  context->Exit();
}

//获取全局的JS函数并且执行GetV8Context只能在render进程中使用
CefRefPtr<CefV8Context> context = browser->GetMainFrame()->GetV8Context();
context->Enter();
CefRefPtr<CefV8Value> global = context->GetGlobal();
if (global)
{
  //获取全局函数js_handler_call_back，并且执行js_handler_call_back
  CefRefPtr<CefV8Value> call_back = global->GetValue("js_handler_call_back");
  if (call_back && call_back->IsFunction())
  {
    CefV8ValueList call_arguments;
    call_arguments.push_back(CefV8Value::CreateString(args->GetString(2)));
    if (call_back->IsFunction())
      call_back->ExecuteFunction(NULL, call_arguments);
  }
}
context->Exit();

本次demo中，我们预定如果设置回调，则第一个参数必须是函数指针，否则我们将使用默认的全局回调函数js_handler_call_back回调数据。

function register(){
    MyMath.register(call_back);
  }
  
  function MyTimer(){
    MyMath.Timer(1);
  }

  <p onclick="register()">this is a register function</p>
  <button onclick="MyTimer()">启动Timer(1)</button>

JS调用C++(Render进程实现)

绑定值和函数到Window对象

在CefRenderProcessHandler::OnContextCreated() 中绑定一些值给 JS 的 window 对象。

class CRenderApp :public CefApp, public CefRenderProcessHandler

void CRenderApp::OnContextCreated(CefRefPtr<CefBrowser> browser,
  CefRefPtr<CefFrame> frame,
  CefRefPtr<CefV8Context> context)
{
  CEF_REQUIRE_RENDERER_THREAD();
  
  //添加全局成员window的成员
  CefRefPtr<CefV8Value> object = context->GetGlobal();
  CefRefPtr<CefV8Value> v8Value = CefV8Value::CreateString("c++ value");
  object->SetValue("MyValue", v8Value, V8_PROPERTY_ATTRIBUTE_NONE);

  //添加全局函数，add函数实现在CJSHandler里面
  CefRefPtr<CefV8Handler> add_handler = new CJSHandler(this);
  CefRefPtr<CefV8Value> add_func = CefV8Value::CreateFunction("add", add_handler);
  object->SetValue("add", add_func, V8_PROPERTY_ATTRIBUTE_NONE);
  //此时支持window.MyValue 属性，和window.add函数
}

bool CJSAdd::Execute(const CefString& name,CefRefPtr<CefV8Value> object,const CefV8ValueList& arguments,CefRefPtr<CefV8Value>& retval,CefString& exception)
{
  //function add
  if (name == "add")
  {
    int32  val2 = arguments[0]->GetIntValue();
    int32  val1 = arguments[1]->GetIntValue();
    int32 sum = val1 + val2;
    retval = CefV8Value::CreateInt(sum);
    return true;
  }
  return false;
}

#######################################JS测试，直接通过window.MyValue访问####################
<script>
function show(){
  alert(window.MyValue);
}

function call_add(val1,val2){
  alert(window.add(val1,val2));
}
</script>

扩展JS

在 CefRenderProcessHandler::OnWebKitInitialized() 中将 JS 脚本注入到 V8 中。
只能被Render 进程的调用

扩展值和函数

更详细的demo可以参考CefRegisterExtension 类的说明

void CRenderApp::OnWebKitInitialized()
{
  CEF_REQUIRE_RENDERER_THREAD();

  // Define the extension contents.
  std::string extensionCode =
    "var MyMath;"
    "if (!MyMath)"//如果没有MyMath对象，则定义一个MyMath对象
    "  MyMath = {};"
    "(function() {"
    "  MyMath.add = function(num1, num2) {"//定义一个MyMath的add函数，参数顺序为外部js调用顺序
    "    native function add();"//native 函数，不带参数
    "    return add(num1, num2);"//add在CefV8Handler具体实现，参数顺序为CefV8Handler 中的参数顺序
    "  };"
    "  MyMath.hellow = 'Hello JS!';"//定义一个MyMath的成员变量
    "})();";

  CefRefPtr<CefV8Handler> add_handler = new CJSAdd();
  // Register the extension.
  CefRegisterExtension("v8/test", extensionCode, add_handler);
}

###################JS测试，直接通过MyMath.add调用函数，MyMath.hellow获取成员变量####################
function CallMyMathAdd()
  {
    v1 = document.getElementById('num1').value;
    v2 = document.getElementById('num2').value;
    alert(MyMath.add(Number(v1),Number(v2)));
  }
  
  function ShowMyMathHellow()
  {
    alert(MyMath.hellow);
  }