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"];
}
);
总结：

C++中定义一个CEF事件，boardcastEvent通过绑定标识广播事件;
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 "
"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); //回传信息
}
总结：

invokeMethod方式是JS将信息发送给了Cef，但是没有回传信息；而onQCefQueryRequest则接收到JS的信息后回复；
客户端通过token加载线上页面时则可以通过onQCefQueryRequest实现，在加载时向Cef请求token等信息，然后客户端回传所需信息，实现账号登陆等操作；
QCefView中通过消息循环和事件过滤来实现信息的传递，通过继承QCefView重写相应的方法可以实现Qt和JS之间的通信，在JS的本地路径或是url作为参数传递给QCefView的构造函数实现两者之间的绑定。其它的通信方式在项目的实际开发中使用较少，这里就没有介绍了
————————————————
版权声明：本文为CSDN博主「MoreThinker」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39071305/article/details/117151582