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

原文地址:https://www.cnblogs.com/lvdongjie/p/15123315.html