当前位置：首页 > article >正文

qt与html通信

article 2026/1/19 1:21:01

**Cef视图（CefView）**是指在使用Chromium Embedded Framework（CEF）时，嵌入到应用程序中的浏览器视图。CEF是一个开源项目，它基于Google的Chromium浏览器，允许开发者将Web浏览器功能嵌入到自己的应用程序中。
html文件

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Login</title><link rel="stylesheet" type="text/css" href="Login.css"/>
</head>
<body onload="onLoad()" id="main" class="noselect"><div id="login"><!-- 消息发送区 --><form method="post"><input id="account" type="text" required placeholder="请输入" name="u"><button id="sendBtn" class="but" type="button" onclick="onCallBridgeQueryClicked('html')">发送</button><textarea id="output" required placeholder="内容" name="t"></textarea></form><!-- 测试按钮区 --><button class="but" type="button" onclick="onInvokeMethodClicked('message1', '标题', '这是message1', 'a', 1.1)">Message1</button><button class="but" type="button" onclick="onInvokeMethodClicked('message2', '标题', '这是message2', 'B', 2.2)">Message2</button></div><script>// ==================== 事件处理函数 ==================== ///*** 处理Qt发送的apChange事件* @param {string} flag 事件标识* @param {...any} arg 可变参数列表*///该函数响应"apChange"信号，负责将接收到的消息显示在页面的文本区域(output)中function ap(flag, ...arg) {const mess = arg[0]; // 获取第一个参数if (mess) {const output = document.getElementById('output');  //获取页面上的输出文本框//格式化消息："[flag]: [mess]"const newText = `${flag}: ${mess}`;//将接收到的消息显示在页面的文本区域(output)中output.value = output.value  ? `${output.value}\n${newText}`   // 非空时换行追加: newText;                    // 空时直接显示}}/*** 处理Qt发送的sendFailChange事件（错误消息）*/function sendFail(flag, ...arg) {const output = document.getElementById('output');const newText = `${flag}: ${arg[0]}`;output.value = output.value ? `${output.value}\n${newText}` : newText;}// ==================== 初始化函数 ==================== ///*** 页面加载完成后初始化CEF通信*/function onLoad() {if (typeof CallBridge === "undefined") {alert("Not in CefView context");return;}// 注册Qt事件监听CallBridge.addEventListener("apChange", ap); //apchange信号绑定ap函数CallBridge.addEventListener("sendFailChange", sendFail);}// ==================== JS → Qt通信 ==================== ///*** 调用Qt方法（无返回值）* @param {string} name 方法名* @param {...any} arg 可变参数*/function onInvokeMethodClicked(name, ...arg) {window.CallBridge.invokeMethod(name, ...arg);}/*** 发送查询请求到Qt（需要返回值）*/function onCallBridgeQueryClicked(name) {const message = document.getElementById("account").value.trim();if (!message) return;// 清空输入框document.getElementById("account").value = '';// 更新本地消息显示const output = document.getElementById('output');const newText = `${name}: ${message}`;output.value = output.value ? `${output.value}\n${newText}` : newText;// 构建并发送请求window.CefViewQuery({request: `${name}|${message}`,onSuccess: (response) => console.log("成功:", response),onFailure: (code, msg) => {output.value += `\n错误(${code}): ${msg}`;}});}</script>
</body>
</html>

css文件

html{   width: 100%;   height: 100%;   overflow: hidden;   font-style: sans-serif;   
}   
body{   width: 100%;   height: 100%;   font-family: 'Open Sans',sans-serif;   margin: 0;   background-color: #0f8fdf;   
}   
#login{   position: absolute;   top: 50%;   left:50%;   margin: -150px 0 0 -150px;   width: 300px;   height: 300px;   
}   
#login h1{   color: #fff;   text-shadow:0 0 10px;   letter-spacing: 1px;   text-align: center;   
}   
h1{   font-size: 2em;   margin: 0.67em 0;   
}   
input{   width: 278px;   height: 18px;   margin-bottom: 10px;   outline: none;   padding: 10px;   font-size: 13px;   color: #fff;   //text-shadow:1px 1px 1px;   border-top: 1px solid #312E3D;   border-left: 1px solid #312E3D;   border-right: 1px solid #312E3D;   border-bottom: 1px solid #56536A;   border-radius: 4px;   background-color: #2D2D3F;   
}   
.but{   width: 300px;   min-height: 20px;   display: block;   background-color: #9cc7e3;   border: 1px solid #9cc7e3;   color: #fff;   padding: 9px 14px;   font-size: 15px;   line-height: normal;   border-radius: 5px;   margin: 0;   
}  textarea{   width: 300px;   height: 200px;   margin-bottom: 10px;   outline: none; resize: none;			pointer-events: none;	font-size: 13px;       border-top: 1px solid #312E3D;   border-left: 1px solid #312E3D;   border-right: 1px solid #312E3D;   border-bottom: 1px solid #56536A;   border-radius: 4px;     
}

Qt应用程序中嵌入Cef浏览器

获取html文件路径：

   //获取html文件路径QDir dir = QCoreApplication::applicationDirPath();QString path = QDir::toNativeSeparators(dir.filePath("html"));

将本地html文件夹映射为一个URL，在cef浏览器里加载我们的html文件

  QCefContext::instance()->addLocalFolderResource(path, "my://cpp_learners");

new一个cef浏览器对象，加载指定html文件

 cefViewWidget = new QCefView("my://cpp_learners/QCefViewTest.html", &setting, this);

把cef浏览器嵌入QT界面

    QGridLayout* layout = new QGridLayout(this);layout->addWidget(cefViewWidget, 0, 0, 1, 1);ui.widgetHtml->setLayout(layout);

Qt → HTML 通信详解

Qt主动向html发送数据：

            QVariantList data;QString str=ui.lineEditInput->text();          data << "qt" << "str";QCefEvent event("apChange"); //创建事件，名称为"apChange"event.setArguments(list);   //绑定发给前端的数据cefViewWidget->broadcastEvent(event); //发送事件到前端ui.lineEditInput->clear();  //清空输入框

HTML接收

// 注册事件监听function onLoad() //页面加载完成后初始化CEF通信{CallBridge.addEventListener("apChange", ap); //apchange信号绑定ap函数}//该函数响应"apChange"信号，负责将接收到的消息显示在页面的文本区域(output)中function ap(flag, ...arg) {const mess = arg[0]; // 获取第一个参数if (mess) {const output = document.getElementById('output');  //获取页面上的输出文本框//格式化消息："[flag]: [mess]"const newText = `${flag}: ${mess}`;//将接收到的消息显示在页面的文本区域(output)中output.value = output.value  ? `${output.value}\n${newText}`   // 非空时换行追加: newText;                    // 空时直接显示}}

HTML → Qt 通信详解

HTML端发送

单击发送按钮会触发onCallBridgeQueryClicked槽函数：

<button id="loginBtn" class="but" type="button" onclick="onCallBridgeQueryClicked('html')">发送</button>

onCallBridgeQueryClicked函数内部操作

(1) 获取用户输入

var message = document.getElementById("account").value;

(2) 构建请求字符串

var str = "html" + "|" + message;  // 例如："html|你好Qt"

(3) 发送到Qt（通过CEF的 `CefViewQuery` API发送数据）

window.CefViewQuery({request: str,          // 要发送的数据onSuccess: on_success, // 成功回调（当前未实现具体逻辑）onFailure: on_failure  // 失败回调（会显示错误信息）
});

QT端接收

当 HTML/JavaScript 调用 window.CefViewQuery() 时，CEF 会触发 cefQueryRequest 信号。
Qt 通过连接这个信号到 onQCefQueryRequest 槽函数，接收并处理来自网页的请求。

    // 绑定信号CefViewQueryconnect(cefViewWidget, &QCefView::cefQueryRequest, this, &QCefView_Test::onQCefQueryRequest);

onQCefQueryRequest函数（接收html发来的数据）

void QCefView_Test::onQCefQueryRequest(int browserId, int frameId, const QCefQuery& query) {// 分割字符串auto parts = query.request().split("|");QString messageType = parts[0];  // "html"QString content = parts[1];      // 用户输入的内容// 处理消息...query.setResponseResult(true, "处理成功"); // 可选：返回响应cefViewWidget->responseQCefQuery(query);  // //给js返回结果
}

更新ui

// 在output文本区域显示发送的内容
document.getElementById('output').value += "\nhtml: " + message;

js->Qt发送弹窗

单击Message按钮调用onInvokeMethodClicked槽函数

<button class="but" type="button" onclick="onInvokeMethodClicked('message1', '标题', '这是message1', 'a', 1.1)">

onInvokeMethodClicked()函数进行js调用

   function onInvokeMethodClicked(name, ...arg) {window.CallBridge.invokeMethod(name, ...arg);}

具体调用内容：

window.CallBridge.invokeMethod("message1", "标题",      // → str1"这是消息1", // → str2"这是消息2", // → str31.1         // → f1
);

当 HTML/JavaScript 调用 window.CallBridge.invokeMethod() 时，CEF 会触发 invokeMethod 信号。
Qt 通过连接这个信号到 onInvokeMethod 槽函数，执行对应的逻辑。

connect

    // 绑定信号invokeMethodconnect(cefViewWidget, &QCefView::invokeMethod, this, &QCefView_Test::onInvokeMethod);

onInvokeMethod()函数

void QCefView_Test::onInvokeMethod(int browserId, int frameId, const QString& method, const QVariantList& arguments)
{
if (0 == method.compare("message1")) {// 从参数列表提取数据QString str1 = arguments[0].toString();  // 第1个参数 → 标题QString str2 = arguments[1].toString();  // 第2个参数 → 消息1QString str3 = arguments[2].toString();  // 第3个参数 → 消息2float f1 = arguments[3].toFloat();       // 第4个参数 → 浮点数int in1 = arguments.size();              // 参数总数// 在Qt界面显示日志ui.textEditText->append("您有消息弹窗提醒1"); // 格式化消息并弹窗QString str = QString("%1,%2,%3,%4").arg(str2).arg(str3).arg(f1).arg(in1);QMessageBox::information(this, str1, str); // 弹窗显示
}
}

代码仓库：
https://gitee.com/sun-Penghu/qt/tree/master/QCefView1

qt与html通信

**Cef视图（CefView）**是指在使用Chromium Embedded Framework（CEF）时，嵌入到应用程序中的浏览器视图。CEF是一个开源项目，它基于Google的Chromium浏览器，允许开发者将Web浏览器功能嵌入到自己的…...

编程日记 2025/12/15 21:24:40

git 根据http url设置账号密码

1. 原因场景：有一种情况，比如在github上面有多个账号，并且每个账号都有些仓库的内容需要修改，并且这些账号自己，不是协作者的关系。这个时候需要针对每个仓库的url设置用户名密码, 2. 设置 2.1 第一步：…...

编程日记 2026/1/9 0:40:25

【CVE-2024-10929】ARM CPU漏洞安全通告

安全之安全(security)博客目录导读目录一、概述二、CVE详情三、受影响产品四、建议措施五、致谢六、版本历史一、概述在部分基于Arm架构的CPU中发现了一个潜在安全问题，称为Spectre-BSE（Branch Status Eviction，分支状态驱逐…...

编程日记 2026/1/18 17:02:23

OpenCV 图形API（33）图像滤波-----高斯模糊函数gaussianBlur()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述使用高斯滤波器对图像进行模糊处理。该函数使用指定的高斯核对源图像进行滤波。输出图像必须与输入图像具有相同的类型和通道数。 cv::gapi::g…...

编程日记 2026/1/18 23:18:30

【Android】如何将 APK 内置为系统应用(适用于编辑设置属性)

如何将 APK 内置为系统应用(适用于编辑设置属性) 在 Android 中，将 APK 文件内置为系统应用涉及到一系列的命令和步骤。以下是详细的操作流程，帮助您解决常见问题，如 /system not in /proc/mounts 的错误。挂载system/app获取可读写权限 …...

编程日记 2026/1/9 1:05:14

【2025最新版】火鸟门户v8.5系统源码+PC、H5、小程序 +数据化大屏插件

一.介绍火鸟地方门户系统V8.5源码系统包含4端： PCH5小程序APP 二.搭建环境系统环境：CentOS、运行环境：宝塔 Linux 网站环境：Nginx 1.2.22 MySQL 5.6 PHP-7.4 常见插件：fileinfo ； redis 三.测…...

编程日记 2026/1/10 5:03:14

关于传感器的详细解析，涵盖定义、分类、工作原理、常见类型、应用领域、技术挑战及未来趋势，结合实例帮助理解其核心概念

以下是关于传感器的详细解析，涵盖定义、分类、工作原理、常见类型、应用领域、技术挑战及未来趋势，结合实例帮助理解其核心概念： 一、传感器的定义与核心功能 1. 定义传感器（Sensor）是一种能够将物理量&#xff…...

编程日记 2026/1/10 23:02:15

EtherCAT转ProfiNet边缘计算网关配置优化：汽车制造场景下PLC与机器人协同作业案例

1.行业背景与需求分析智能汽车焊装车间是汽车制造的核心工艺环节，某德国豪华品牌在其上海MEB工厂新建的焊装车间中，采用西门子S7-1500PLC作为ProfiNet主站，负责整线协调与质量追溯；同时部署KUKAKR1500Titan机器人（Eth…...

编程日记 2026/1/12 12:00:39

极狐GitLab CI/CD 流水线计算分钟数如何管理？

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网计算分钟管理 (PREMIUM SELF) 在极狐GitLab 16.1 中，从 CI/CD 分钟数重命名为计算配额或计算分钟数。管理员可…...

编程日记 2025/12/2 7:00:24

HTTP协议 --- 超文本传输协议和 TCP --- 传输控制协议

是基于 TCP 协议的 80 端口的一种 C/S 架构协议。特点：无状态 --- 数据传输完成后，会断开 TCP 连接，哪怕浏览器还正常运行。请求报文 --- 方法响应报文 --- 状态码是一种面向连接的可靠传输协议。面向连接 --- 在传输数据之前&am…...

编程日记 2026/1/1 12:08:10

类和对象(下篇)(详解)

【本节目标】 1. 再谈构造函数 2. Static成员 3. 友元 4. 内部类 5. 再次理解封装 1. 再谈构造函数 1.1 构造函数体赋值在创建对象时，编译器通过调用构造函数，给对象中各个成员变量一个合适的初始值。 #include <iostream> using name…...

编程日记 2026/1/1 6:27:57

Uniapp：获取当前定位坐标

目录一、出现场景二、具体使用一、出现场景在项目的开发中，会出现打卡、定位当前位置的功能，那我们如何获取当前位置呢？这就需要使用getLocation来获取当前位置坐标二、具体使用 uni.getLocation({type: wgs84, // 返回可以用于uni.op…...

编程日记 2025/12/5 2:22:57

最大子序和问题——动态规划/贪心算法解决

目录一：问题描述二：解决思路1——动态规划思想三：C 语言代码实现四：复杂度分析五：解决思路2——贪心算法思想六：具体步骤七: C语言代码实现八：复杂度分析一：问题描述 …...

编程日记 2025/11/30 21:38:56

【Unity】JSON数据的存取

这段代码的结构是为了实现数据的封装和管理，特别是在 Unity 中保存和加载玩家数据时。以下是对代码设计的逐步解释： 1. PlayerCoin 类 PlayerCoin 是一个简单的数据类，用于表示单个玩家的硬币信息。它包含以下字段： count&…...

编程日记 2025/12/5 8:40:57

LeetCode【剑指offer】系列（位运算篇）

剑指offer15.二进制中1的个数题目链接题目：编写一个函数，输入是一个无符号整数（以二进制串的形式），返回其二进制表达式中数字位数为 ‘1’ 的个数（也被称为汉明重量).）。思路一&#xff…...

编程日记 2026/1/15 0:13:34

服务器 using BarrageGrab; using System; using System.Collections.Concurrent; using System.Linq; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading;namespace Lyx {class Server{private TcpListener listener;private Concurre…...

编程日记 2025/12/1 21:55:45