Qt与Js互相调用

Qt开发老杰

已于 2023-03-07 14:33:39 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： qt javascript ui

于 2023-03-07 14:32:47 首次发布

本文链接：https://blog.csdn.net/QtCompany/article/details/129381937

本文介绍了如何在Qt中使用QWebEngineView加载HTML并利用QWebChannel实现Qt与JavaScript的双向调用。Qt调用Js时，建议接收JSON格式的返回值以处理复杂情况。而当Js接口异步返回时，应由Js主动调用Qt接口，而非绑定回调。同时，Js调用Qt接口需引入qwebchannel.js，确保Qt版本与编译项目时使用的版本一致。

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

目前使用场景有：

通过QWebEngineView，来加载某个url或html文件（需要包含特定js文件）。
通过QWebChannel绑定到QWebEngineView上，qt可以调用js暴露的接口，js也可以调用qt暴露的接口。

Qt调用Js示例

调用示例

QString strCall = QString("qtLogin('KFadmin','herx123###')"); // 填充js函数调用字符串
auto callback = std::bind(&ShowWeb::on_qt_call_js_callback_login, this, std::placeholders::_1); // 绑定回调函数，如果不需要处理回调返回结果，则可以省略。
m_web_engine_view->page()->runJavaScript(strCall, callback); // 调用js函数

注：

目前建议qt与js通信，js返回给qt的返回值，建议使用json格式，方便处理多返回值处理。如果js接口是异步返回，则不需要绑定回调。
如果js返回值是异步的，则需要js主动调用qt暴露的接口，而不是绑定回调函数。

Js调用Qt接口示例

js调用qt依赖qwebchannel.js文件，Qt会提供此文件。

<script type="text/javascript" src="./qwebchannel.js"></script>
<script type="t

最低0.47元/天解锁文章