MFC and Javascript Interaction-Cef

In this paper, Cef is used to load web pages, which calls each other between JavaScript and mfc code in Web pages. That is, mfc calls javascript, and JavaScript calls mfc code.

1. javascript calls mfc code
(1) Build a framework for mfc to load cef and load web pages. This part of the content has a lot of blog posts on the web, but it will encounter some crashes, or fail to exit normally, or multi-process and single-process problems, or slow loading of web pages, etc. Some solutions are described in my other blog posts. Skip this part here.
(2) First, override the virtual function OnContextCreated in the SimpleApp class, which is equivalent to subscribing to the javascript call information, which is implemented in CefV8Handler with the following header file definitions:

virtual void OnContextCreated(CefRefPtr<CefBrowser> browser, CefRefPtr<CefFrame> frame, CefRefPtr<CefV8Context> context) OVERRIDE;

In the implementation, the code is as follows:

// The var type can accept all object or variable
CefRefPtr<CefV8Value> pV8 = context->GetGlobal();
// bind function 
CefRefPtr<CSimpleV8Handler> pJsHandler(new CSimpleV8Handler());
CefRefPtr<CefV8Value> pFunc = CefV8Value::CreateFunction(CefString("JSCallCppCB"), pJsHandler);
pV8->SetValue(CefString("JSCallCppCB"), pFunc, V8_PROPERTY_ATTRIBUTE_NONE);

The string "JSCallCppCB" here needs to be remembered. This name can be changed, but to keep this name the same as the one invoked on javascript, otherwise the invocation will not succeed. The following section describes how to write on javascript.
(3) Rewrite the virtual function Execute in the inheritance class CSimpleV8Handler of cef, which is equivalent to the callback processing of cef.The header file is defined as follows:

virtual bool Execute(const CefString& name, CefRefPtr<CefV8Value> object, const CefV8ValueList& arguments,CefRefPtr<CefV8Value>& retval, CefString& exception) OVERRIDE;

The code in the implementation is as follows:

bool CSimpleV8Handler::Execute(const CefString& name, CefRefPtr<CefV8Value> object, const CefV8ValueList& arguments,CefRefPtr<CefV8Value>& retval, CefString& exception)
	if (name == CefString("JSCallCppCB")){		//This is distinguished by the callback name
		if (arguments.size() ==2 ){				//Determine the number of parameters passed on a Web page
			CefString str = arguments[0]->GetStringValue();		//Gets the value of the first parameter
			int value = arguments[1]->GetIntValue();			//Gets the value of the second parameter
			//Do something else
			return true;
	return false;

A magical problem here is that the breakpoint can't stop anyway. At first I thought the code didn't execute at all, but a pop-up message box found that there was a prompt box, but the breakpoint didn't work and I don't know what happened.
(4) The most important thing is how to call this method on the web page. The following is a simple test of javascript calling code:

   var str = document.getElementById('cefInput').value;

Note that the function name here is the same as the subscription name in the cef and the name in the callback, until you can perfectly call mfc code from javascript and pass multiple parameters.

2. mfc uses javascript code
1 mfc code
This part is slightly different. There are direct calls in v8 engine on the web, but where to write this call code depends on the requirements, I write it directly in the browser's Dlg, as follows:

if (m_simpleClient.get()){
	CefRefPtr<CefBrowser>browser = m_simpleClient->GetBrowser(m_hWnd);
	if (browser){
		CefRefPtr<CefFrame> frame = browser->GetMainFrame();
		CString jscall = _T("ChangeText('");
		jscall += str;
		jscall += _T("');");
		frame->ExecuteJavaScript(jscall.GetBuffer(), frame->GetURL(), 0);

Where m_simpleClient is the cef browser handle, which is a class variable when creating a browser. If you are not sure how to create a cef browser, check it online.
(2) javascript code

function ChangeText(v){
    //Do something

Multiple parameters can also be passed here, just assemble the string of the call in the c++ code, write the definition in javascript, and note that the parameters are consistent.

Forty-one original articles have been published. 7. 10,000 visits+
Private letter follow

Tags: Javascript

Posted on Sat, 18 Jan 2020 21:28:11 -0500 by nanobots