CEF3 Research (iv) JavaScript integration

First, Introduction

Google Chrome and CEF use V8javascript engine as the content of the JavaScript implementation. Each window in the browser has its own JS context that provides scope and safe execution of the JS code in the window. CEF exposes a large number of JS features integrated in the client application.
CEF3 's WebKit and JS run in a separate rendering process. Use Tid_renderer as a unique identifier in the main thread of the rendering process. The execution of all V8 must be placed in this thread.
The callback function associated with JS execution is exposed through the Cefrenderprocesshandler interface. This interface is obtained through the Cefapp::getrenderprocesshandler () function when a new rendering process is initialized.

Ii. implementation of JavaScript

The simple way to execute JS in a client application is to use the Cefframe::executejavascript () function, which is available in both the browse process one and the render process. Safe to use outside of a JS context.

cefrefptr<cefbrowser> browser = ...;
cefrefptr<cefframe> frame = Browser->getmainframe ();
Frame->executejavascript ("alert (' Executejavascript works! ');", Frame->geturl (), 0);

The above causes alert (' Executejavascript works! ') Executes in the main window of the browser.

In the JS context of the window, the Executejavascript function can be used for function and variable interaction. is to use window bindings and extensions to return values from JS to client applications.

Third, window binding

A window binding allows a client application to tie a value onto a Window object, and the implementation of the window binding uses the Cefrenderprocesshandler::oncontextcreated () function.

Such as:

voidMyrenderprocesshandler:: oncontextcreated(Cefrefptr<Cefbrowser>Browser,Cefrefptr<Cefframe>Frame,Cefrefptr<Cefv8context>Context){//RetrieveTheContext‘SWindowObject.Cefrefptr<Cefv8value>Object=Context-Getglobal();//CreateANewV8StringValue.SeeThe"Basic JS Types"SectionBelow.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" Span class= "O", strv8_property_attribute_none) ; /span>

A window binding that the JavaScript framework can interact with.

language="JavaScript">alert (Window.myval);//shows an alert box with "My value!" </script>

Window binding is the opportunity to reload a framework every time a frame is loaded to the client application to change the binding if necessary. For example, different frameworks can access different attributes by modifying the Window object values of the binding framework.

Iv. expansion

Extensions are like window bindings, except that each frame is loaded into context, once loaded, it cannot be modified, and when an extension is loaded and attempting to access the DOM in an extended load, the DOM does not exist in the crash. Extensions should be registered with the Cefregisterextension function in the cefrenderprocesshandler::onwebkitinitialized () function.

void myrenderprocesshandler:: Onwebkitinitialized () {//Define the extension contents. std::string extensioncode = "var test;" "if (!test)" "test = {};" "Test.myval = ' My value! ';" //Register the extension. cefregisterextension ( "v8/test" extensioncodenull); }

The string described by Extensioncode can be any valid code, and the JS framework can interact with the extension code

language="JavaScript">alert (Test.myval);//shows an alert box with "My value!" </script>

V. Basic JS Type

CEF supports the creation of basic data types, including: Undefined, NULL, bool, int, double, date, and string. These basic data types are created using the cefv8value::create* () series static functions. such as creating a JS string:cefrefptr<cefv8value> str = cefv8value:: createstring ("My value!" );

The base data type can be created anywhere and not initialized in the context of the association. Such as:

Cefrefptr<cefv8value> val = ...;
if (Val. Isstring ())
{//The value is a string.}

Use the Get*value () series function to get the value: cefstring strval = val. GetStringValue ();

Six, JS array

Use the Cefv8value::createarray () static function and pass a length as an argument to create an array. Arrays can only be created and used within the context. Such as:

Cefrefptr<cefv8value> arr = cefv8value:: Createarray(2);

The value is assigned to an array using a variant of the SetValue () method, with an index as the first parameter.
arr->SetValue(0, cefv8value:: createstring("My first string!" ));
arr->SetValue(1, cefv8value:: createstring("My Second string!" ));

The IsArray () function tests whether Cefv8value is an array, the Getarraylength () function Gets the length of the data, and gets a value from the arrays using the GetValue () Variant function.

Seven, JS object

Use the Cefv8value::createobject static function to create a JS object with an optional cefv8accessor parameter. objects can only be created and used in the JS context.

cefrefptr<cefv8value> obj = cefv8value:: CreateObject(NULL );

Use the SetValue () Variant function and assign a value to the object as the first argument with the string key.

Viii. visitor to the object

The JS object can optionally use a cefv8accessor associated with it to provide an implementation of the source getting and setting values.
Cefrefptr<cefv8accessor> accessor = ... ;
Cefrefptr<cefv8value> obj = cefv8value:: CreateObject( accessor);

An implementation of the Cefv8accessor interface must be provided by the client application.

ClassMyv8accessor:PublicCefv8accessor{Public:Myv8accessor(){}VirtualboolGet(ConstCefstring&Name,ConstCefrefptr<Cefv8value>Object,Cefrefptr<Cefv8value>&retval,Cefstring&exception)OVERRIDE{If(Name=="Myval"){//ReturnTheValue.retval=Cefv8value::Createstring(Myval_);ReturnTrue;}//ValueDoesNotExist.ReturnFalse;}VirtualboolSet(ConstCefstring&Name,ConstCefrefptr<Cefv8value>Object,ConstCefrefptr<Cefv8value>Value,Cefstring&exception)OVERRIDE{If(Name=="Myval"){If(Value.Isstring()){//StoreTheValue.Myval_=Value.GetStringValue();}Else{//ThrowAnexception.exception="Invalid Value type";}ReturnTrue;}//ValueDoesnot existreturn false} //variable used for storing the valuecefstring myval_//provide the reference Counting implementation for this classimplement_refcounting (myv8accessor}

To pass a value to a visitor, you must use the SetValue () Variant function setting to accept the AccessControl and PropertyAttribute parameters

Nine, JS function

CEF supports JS function creation and local implementation,

CEF3 Research (iv) JavaScript integration