QCefView实现与JS的交互

Cef主动向JS通信主要有一种方法：

首先在Cef中

QCefEvent event ( const QString& eventName );    //定义一个CEF事件

event.setStringProperty ( const QString& key, const QString& msg );    //为事件添加参数

boardcastEvent ( const QString& signalName, QCefEvent& event );   //C++广播，其中signalName是与JS交互的标识

在JS中则需要添加一个监听事件

QCefClient.addEventListener (const QString& signalName, void* JSListener)

其中：

• signalName：cef中传递的字符串标识
• JSListener：JS中调用的函数地址

具体使用示例：

//C++
QCefEvent event("SendMsgToJSEvent");		
event.setStringProperty("CppMsg", sMsg);		
boardcastEvent("JsRecvCppTest", event);

//JS
QCefClient.addEventListener( "JsRecvCppTest", function onColorChanged (event){ 
        document.getElementById("main").style.backgroundColor = event["CppMsg"]; 
    }
);

总结：

1. C++中定义一个CEF事件，boardcastEvent通过绑定标识广播事件;
2. JS中addEventListener绑定C++中的一个字符串标识和JS中的函数；

JS主动向Cef通信主要有两种方法：

（1）invokeMethod / onInvokeMethodNotify

在JS中

invokeMethod (const QString& method, const QVariantList &arguments)

其中：

• method：JS定义的交互标识
• arguments：JS传递的参数列表

在Cef中

QCefView::onInvokeMethodNotify (int browserId, int frameId, const QString &method, const QVariantList &arguments)

其中：

• method：JS定义的交互标识，由Cef接收消息过滤后进行不同的响应
• arguments：JS传递过来的参数列表

具体示例：

// JS
QCefClient.invokeMethod("TestMethod", 1, false, "arg3");

// C++
void CefView::onInvokeMethodNotify(int browserId, 
	int frameId, 
	const QString& method, 
	const QVariantList& arguments)
{
	if (0 == method.compare("TestMethod"))
	{
    	QString title("QCef InvokeMethod Notify");
        QString qsArgument(arguments.last().value<QString>());
	    QString text = QString(
		    "Method: %1\r\n"
		    "Arguments: %2")
		    .arg(method)
            .arg(qsArgument);

	    QMessageBox::information(this->window(), title, text);
	}
}

（2）onQCefQueryRequest

在JS中

JS使用QCefQuery发送请求：

var query = { request, onSuccess, onFailure}

其中：

• request：JS发送的请求信息
• onSuccess：Cef回复成功时调用
• onFailure：Cef回复失败时调用

window.QCefQuery (query);  //window为CefRefPtr<CefWindow>类型

在Cef中

onQCefQueryRequest (const QCefQuery &query)    // 响应QCefQuery

具体示例：

// JS
var query = {
    request: "getUserInfo",
    onSuccess: function (response) { alert (response); },
    onFailure: function (error_code, error_message) { alert (error_message); }
}
window.QCefQuery(query);

void QCefView::onQCefQueryRequest(const QCefQuery &query)
{
    if ("getUserInfo" == query.request())    // 根据JS的request筛选
    {
        QString response = QString("Accept a piece of information from JS: %1")
            .arg(query.request());

        //设置回复信息, 其中true则回传成功，JS将调用onSuccess，false则调用onFailure
        query.setResponseResult (true, response);	
    }
    responseQCefQuery (query);    //回传信息
}

总结：

1. invokeMethod方式是JS将信息发送给了Cef，但是没有回传信息；而onQCefQueryRequest则接收到JS的信息后回复；
2. 客户端通过token加载线上页面时则可以通过onQCefQueryRequest实现，在加载时向Cef请求token等信息，然后客户端回传所需信息，实现账号登陆等操作；

QCefView中通过消息循环和事件过滤来实现信息的传递，通过继承QCefView重写相应的方法可以实现Qt和JS之间的通信，在JS的本地路径或是url作为参数传递给QCefView的构造函数实现两者之间的绑定。其它的通信方式在项目的实际开发中使用较少，这里就没有介绍了