QCefView：C++与JS交互的方法

最新推荐文章于 2025-07-17 13:11:03 发布

原创

最新推荐文章于 2025-07-17 13:11:03 发布 · 2.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#qt5

本文介绍了如何在QT应用中使用QCefView进行CEF浏览器的嵌入，并详细阐述了C++调用JavaScript方法以及JavaScript与C++通信的步骤。通过设置别名映射关系，C++能够直接调用JS方法并传递参数，同时，JS可以通过特定方式向C++发送请求，C++处理后将结果返回给JS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

QT嵌入CEF，使用QCefView比较简单些，很多功能都已经集成好了，使用比较方便，关于如何搭建CEF环境与编译QCefView，这里就不说了，网上有很多文章，而且通过编译调试QCefView，也可以加强对QCefView的了解，这里主要整理下我对QCefView的C++与JS的通信方法。

进入正题：

1、C++调用JS的方法：

（1）JS设置自己的方法名称与C++调用的别名映射关系：

//JS代码
function onColorChanged (event) {
    document.getElementById("main").style.backgroundColor = event["color"];
}
function onRecvCppMsg (event)
{
    alert("收到C++的信息="+event["CppMsg"]);
}
function onLoad()
{
    if (typeof(QCefClient) == 'undefined') {
     return;
    }
    //这里将JS的onColorChanged方法与c++的colorChange事件关联
    QCefClient.addEventListener("colorChange", onColorChanged)
    QCefClient.addEventListener("JsRecvCppTest", onRecvCppMsg)
}

如上述JS代码，在JS的onLoad()函数中声明映射关系，C++调用"colorChange"时，就是调用JS的onColorChanged(event)方法，同理，C++调用"JsRecvCppTest"时，就是调用JS的onRecvCppMsg(event)方法；

（2）参数传递：

C++在调用JS的方法前，C++会先设置参数：