【QT】Qt5 QtWebEngine使用教程

news2025/4/6 11:52:13

1、QtWebEngine相比于QtWebKit的优势

现代渲染引擎：
- QtWebEngine：基于 Chromium 开源项目，采用 Blink 渲染引擎。Blink 是一个现代且高性能的渲染引擎，广泛应用于 Chrome 等主流浏览器中。它在渲染速度、页面布局准确性以及对最新 Web 标准（如 HTML5、CSS3 和 JavaScript 新特性）的支持上表现出色。这使得使用 QtWebEngine 的应用程序能够快速、准确地呈现复杂的网页内容，为用户提供流畅的浏览体验。
- QtWebKit：使用的 WebKit 渲染引擎在发展过程中逐渐落后于 Blink。随着 Web 技术的快速发展，WebKit 在处理一些新的 Web 标准和复杂页面时，性能和兼容性方面的问题逐渐显现。
多进程架构：
- QtWebEngine：得益于 Chromium 的多进程架构设计。这种架构将网页的不同部分（如渲染进程、插件进程等）分离到不同的进程中运行。这样一来，如果某个网页内容（如一个有问题的 JavaScript 脚本或插件）出现崩溃，不会影响整个应用程序的稳定性，只会终止相关的进程，而应用程序的其他部分仍可正常运行。同时，多进程架构还能更好地利用多核 CPU 的性能，提升整体渲染和处理效率。
- QtWebKit：通常采用单进程架构，一旦网页内容出现错误，很可能导致整个应用程序崩溃，稳定性较差。而且单进程架构在资源利用和性能提升方面存在一定局限。
安全沙箱机制：
- QtWebEngine：继承了 Chromium 的安全沙箱机制。沙箱对网页内容的运行环境进行严格限制，阻止网页代码对本地系统资源进行非法访问，如访问敏感文件、执行恶意脚本等。这种机制大大增强了应用程序的安全性，降低了因网页内容导致的安全威胁。
- QtWebKit：虽然也有一定的安全措施，但相比之下，其沙箱机制不够完善，在防止网页内容对本地系统的潜在攻击方面，不如 QtWebEngine 有效。

2、项目配置

2.1 确认 Qt 版本

QtWebEngine 从 Qt 5.6 开始成为 Qt 的一部分。确保你使用的 Qt 版本支持该模块。并确认在安装 Qt 时安装了 QtWebEngine 模块，可以通过 Qt 的 MaintenanceTool.exe 工具查看是否安装。

2.2 在.pro 文件中添加依赖

在你的 Qt 项目的 .pro 文件中添加 QT += webenginewidgets webchannel。

3、显示网页

QtWebEngine 模块的 QWebEngineView 相当于 QtWebKit 模块的 QWebView，在函数接口上类似。

使用 QWebEngineView 的 load 函数加载网页或html文件。如下所示：

#include <QApplication>
#include <QWebEngineView>

int main(int argc, char *argv[])
{
     
    QApplication a(argc, argv);

    QWebEngineView view;
    view.load(QUrl("http://www.example.com"));
    view.show();

    return a.exec();
}

使用 QWebEngineView 的 setHtml 函数可以直接加载显示 html 文本，一般用于简单显示 html 超文件。示例如下：

#include <QApplication>
#include <QWebEngineView>

int main(int argc, char *argv[])
{
     
    QApplication a(argc, argv);

    QWebEngineView view;
    QString html = "<html><body><h1>Hello, QtWebEngine!</h1></body></html>";
    view.setHtml(</