实现QT与HTML页面通信

最新推荐文章于 2025-06-23 14:29:43 发布

原创

最新推荐文章于 2025-06-23 14:29:43 发布 · 7.8w 阅读

206 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #qt #通信 #混合交互

本文介绍了如何从QtWebKit迁移到QtWebEngine，以及使用QtWebEngine和QtWebChannel实现C++与HTML、JavaScript之间的双向通信。通过示例展示了如何在C++中加载和显示HTML页面，以及如何在JavaScript中访问和操作Qt对象。QtWebChannel基于WebSockets协议，提供了一种高效、解耦的混合应用开发方案。

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

1. 前言

最近，C++和WEB本地混合应用开发模式逐渐流行起来，个人也认为标记语言描述的界面是界面开发的一个发展趋势。WPF、Java FX，当然也少不了Html。基于Html的界面在开发效率，可移植性上都十分有优势，所以也被很多程序采用

随着HTML5技术风生水起，Qt开发团队用近一年的时间开发了一个全新的基于Chromium的浏览器引擎Qt WebEngine，以支持面向未来的Hybrid应用开发，并完全支持桌面和嵌入式平台。此外，Qt WebEngine不仅提供了易于使用的跨平台API，还完全集成了Qt的图形库，允许网页内容进行叠加，并与Qt用户界面或OpenGL图形效果混合。Qt 5.4仍然包含老旧的Qt WebKit模块，但在其后发布的版本中将停止对于WebKit的支持，对此，Qt团队建议开发者将项目统一从WebKit迁移至Qt WebEngine，而对于需要Web能力的新项目，最好直接采用Qt WebEngine开发。在现在下载的QT5.6 beta预编译版本中已经没有了Qt WebKit模块。

目前QT官方的文档中对如何从原来的WebKit迁移至QtWebEngine没有提供足够丰富的文档和指导。

本文记录一些从WebKit迁移至QtWebEngine，实现C++与HTML和JS交互的一些经验和例子。

2. 使用Qt WebEngine和WebChannel模块

在官方提供的Porting from QtWebKit to QtWebEngine---https://wiki.qt.io/Porting_from_QtWebKit_to_QtWebEngine文档中给出了从WebKit迁移至QtWebEngine的一些建议和指导，其中提到QWebFrame 已经被合并到QwebEnginePage中，Qt WebEngine不能和QnetworkAccessManager交互等。

原来在Webkit中使用的交互集成的类和方法也不能使用了，原来Webkit中常用的交互方式如下：

1) 在Qt代码中加载并显示该页面

QWebView view;

view.load(QUrl("test.html"));

view.show();

官方推荐的使用方式：

QWebEngineView*view = newQWebEngineView(parent);

view->load(QUrl("http://qt-project.org/"));

view->show();

2) 在Qt对象中访问web页面元素

// myPlugin指向的对象可在HTML中用名字myPluginObject进行访问

webView->page()->mainFrame()->addToJavaScriptWindowObject("myPluginObject",myPlugin);

// 当信号signalEmitted被触发时，调用JavaScript的functionToCall函数

webView->page()->mainFrame()->evaluateJavaScript("myPluginObject.signalEmitted.connect(functionToCall);")

官方推荐的使用方式：

方法一：QWebEnginePage的runJavaScript(const QString & scriptSource, FunctorOrLambdaresultCallback)

方法二：使用QtWebChannel方式，这是官方的推荐方式，他可以很方便的实现C++和HTML/JS的双向通信，同时实现C++和HTML/JS的解耦，方便开发人员的分工及系统集成，参见后面的例子。

3) 在web页面中访问Qt对象

在web页面中可以通过类似于下的JavaScript代码访问Qt对象：

<ahref="javascript:document.getElementByIdx_x("myLabel").setText("通过JavaScript访问Qt对象");"mce_href="javascript:document.getElementByIdx_x("myLabel").setText("通过JavaScript访问Qt对象");">点击访问Qt对象</a>

官方推荐的使用方式：

使用QtWebChannel方式，这是官方的推荐方式，他可以很方便的实现C++和HTML/JS的双向通信，同时实现C++和HTML/JS的解耦，方便开发人员的分工及系统集成，参见后面的例子。

在QT5.5和QT5.6中，利用Qt的Qt WebEngine和WebChannel模块，你完全可以进行本地桌面与web混合应用开发，你可以自由地混合JavaScript，样式表，Web内容和Qt组件。基于Chromium的 Qt WebEngine是一个非常成熟的web浏览引擎。你可以在Ｃ++ 中执行JavaScript，或者在网页中集成Ｃ++对象，并且通过JavaScript和这些对象进行交互。

一个现代的ＨＴＭＬ渲染引擎只是混合开发的一半，另一半就是本地应用和渲染对象的交互。ＱＴ的Chromium的 Qt WebEngine 集成提供了这种解决方案，当然目前还不是很完善。

从QT5.4开始就新增了Qt WebChannel模块，该模块提供了在QML/C++ 和 HTML/Javascript之间的一个简单、易用的桥接，从而使得开发能够使用Qt和Web技术进行混合开发，目前QT官方也推荐是用QtWebChannel来桥接C++和HTML，参见Qt WebChannel – bridging the gap betweenC++/QML and the web------https://www.youtube.com/watch?v=KnvnTi6XafA，这是2014年Qt开发者大会上的一段视屏演讲。

通过QtWebChannel能够实现C++/QML和HTML/javascript客户端之间进行无缝桥接，目前主要支持两种方式的桥接。