CEF3研究(四)之javascript集成

一、介绍

谷歌浏览器和CEF使用V8JavaScript Engine作为内容的JavaScript实现。在浏览器中的每个窗口都有它自己在的JS上下文提供作用域和在窗口中安全的执行JS代码。CEF暴露大量JS功能集成在客户端应用程序。
CEF3的Webkit和JS在单独的渲染进程中运行。在渲染进程的主线程中使用TID_RENDERER 作为唯一标识。所有V8的执行必须放置在这个线程中。
与JS执行相关的回调函数被暴露是通过CefRenderProcessHandler接口实现。当一个新的渲染进程被初始化时通过CefApp::GetRenderProcessHandler（）函数获取这个接口。

二、执行JavaScript

在客户端应用程序中简单的方式执行JS使用CefFrame::ExecuteJavaScript()函数，这个函数在浏览进程一和渲染进程中都可用。在一个JS上下文外可安全使用。

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

上面的引起alert('ExecuteJavaScript works!')在浏览器的主窗口中执行。

在窗口的JS上下文中ExecuteJavaScript函数可用于函数和变量交互。是为了从JS到客户端应用程序返回值使用窗口绑定和扩展。

三、窗口绑定

 窗口绑定允许客户端应用程序系上一个值到窗口的window对象上，窗口绑定的实现使用CefRenderProcessHandler::OnContextCreated()函数。

如：

void MyRenderProcessHandler::OnContextCreated(
    CefRefPtr<CefBrowser> browser,
    CefRefPtr<CefFrame> frame,
    CefRefPtr<CefV8Context> context) {
  // Retrieve the context's window object.
  CefRefPtr<CefV8Value> object = context->GetGlobal();

  // Create a new V8 string value. See the "Basic JS Types" section below.
  CefRefPtr<CefV8Value> str = CefV8Value::CreateString("My Value!");

  // Add the string to the window object as "window.myval". See the "JS Objects" section below.
  object->SetValue("myval", str, V8_PROPERTY_ATTRIBUTE_NONE);
}

JavaScript框架可以与之交互的窗口绑定。

<script language="JavaScript">
alert(window.myval); // Shows an alert box with "My Value!"
</script>

窗口绑定是每次重新加载一个框架加载给客户端应用程序在必要时更改绑定的机会。例如，不同的框架通过修改绑定框架的窗口对象值可以访问不同的特性。

四、扩展

扩展像window绑定一样除了为每个框架 加载到上下文之外，一旦加载就不能修改，当一个扩展已经加载并试图在扩展加载中访问DOM就会出现DOM不存在的crash。扩展应该在CefRenderProcessHandler::OnWebKitInitialized()函数中使用CefRegisterExtension函数注册。

void MyRenderProcessHandler::OnWebKitInitialized() {
  // Define the extension contents.
  std::string extensionCode =
    "var test;"
    "if (!test)"
    " test = {};"
    "(function() {"
    " test.myval = 'My Value!';"
    "})();";

  // Register the extension.
  CefRegisterExtension("v8/test", extensionCode, NULL);
}

通过extensionCode描述的字符串可以是任何有效的代码，JS框架可以和扩展代码进行交互

<script language="JavaScript">
alert(test.myval); // Shows an alert box with "My Value!"
</script>

五、基本JS类型

CEF支持基本数据类型的创建，包括：undefined, null, bool, int, double, date 和 string.这些基本数据类型使用CefV8Value::Create*()系列静态函数创建。如创建一个JS字符串：CefRefPtr<CefV8Value> str = CefV8Value::CreateString("My Value!");

基本数据类型可在任何地方创建和在所关联的上下文中不用初始化。如：

CefRefPtr<CefV8Value> val = ...;
if (val.IsString())
{ // The value is a string. }

使用Get*Value()系列函数获取值：CefString strVal = val.GetStringValue();

六、JS数组

使用CefV8Value::CreateArray()静态函数并传递一个长度作为参数创建数组。数组只能在上下文内部创建并使用。如：

CefRefPtr<CefV8Value> arr = CefV8Value::CreateArray(2);

 值赋给一个数组使用SetValue()方法的变体,以一个索引作为第一个参数。
arr->SetValue(0, CefV8Value::CreateString("My First String!"));
arr->SetValue(1, CefV8Value::CreateString("My Second String!"));

IsArray()函数测试CefV8Value是否为数组，GetArrayLength()函数获取数据的长度，从数组中获取一个值使用GetValue()变体函数。

七、JS对象

使用CefV8Value::CreateObject静态函数可带一个可选的CefV8Accessor参数创建JS对象。对象也只能在js上下文中创建并使用。

 CefRefPtr<CefV8Value> obj = CefV8Value::CreateObject(NULL);

使用SetValue()变体函数并以字符串key作为第一参数给对象分配值。

八、对象的访问者

JS对象可选择使用一个与之关联的CefV8Accessor以提供一个源生的getting和setting值的实现。
CefRefPtr<CefV8Accessor> accessor = …;
CefRefPtr<CefV8Value> obj = CefV8Value::CreateObject(accessor);

CefV8Accessor接口的一个实现,必须由客户端应用程序提供。

class MyV8Accessor : public CefV8Accessor {
public:
  MyV8Accessor() {}

  virtual bool Get(const CefString& name,
                   const CefRefPtr<CefV8Value> object,
                   CefRefPtr<CefV8Value>& retval,
                   CefString& exception) OVERRIDE {
    if (name == "myval") {
      // Return the value.
      retval = CefV8Value::CreateString(myval_);
      return true;
    }

    // Value does not exist.
    return false;
  }

  virtual bool Set(const CefString& name,
                   const CefRefPtr<CefV8Value> object,
                   const CefRefPtr<CefV8Value> value,
                   CefString& exception) OVERRIDE {
    if (name == "myval") {
      if (value.IsString()) {
        // Store the value.
        myval_ = value.GetStringValue();
      } else {
        // Throw an exception.
        exception = "Invalid value type";
      }
      return true;
    }

    // Value does not exist.
    return false;
  }

  // Variable used for storing the value.
  CefString myval_;

  // Provide the reference counting implementation for this class.
  IMPLEMENT_REFCOUNTING(MyV8Accessor);
};

为了将值传递给访问者必须使用SetValue()变体函数设置，接受AccessControl和PropertyAttribute参数

九、JS函数

CEF支持JS函数创建和本地实现，