详解 Qt WebEngine 模块

Qt WebEngine 模块是 Qt 提供的一个功能强盛的模块，用于在 Qt 应用中嵌入和显示现代网页内容。该模块基于 Chromium 引擎，支持丰富的 Web 技能（如 HTML5、CSS3、JavaScript 等），得当需要嵌入网页浏览、Web 应用、JavaScript 交互等功能的桌面应用程序。
1. Qt WebEngine 的主要组件

Qt WebEngine 提供了一些核心类，用于网页显示、加载、交互等操纵。以下是主要的类及其用途：

• QWebEngineView：这是用于显示网页的主要控件类，继续自 QWidget。可以通过 QWebEngineView 举行网页加载、显示、导航等操纵。
  
• QWebEnginePage：代表一个网页内容的控制类，提供了网页内容和浏览控制的功能，如处置处罚导航、管理 JavaScript 和 Cookie 访问等。
  
• QWebEngineProfile：代表用户的 Web 浏览配置文件，管理 Cookie、缓存、汗青纪录和自定义设置。一个应用可以有多个 QWebEngineProfile，每个配置文件可以代表差别的用户。
  
• QWebEngineSettings：用于配置 QWebEnginePage 或 QWebEngineProfile 的设置，答应启用或禁用功能（如 JavaScript、插件、图像加载等）。
  
• QWebEngineScript：用于在网页加载时执行 JavaScript 脚本。可以设置为在页面加载前或加载后执行。
  
• QWebEngineDownloadItem：管理下载项，答应追踪和控制下载进度、暂停和恢复下载等。
  

2. 如何在 Qt 中利用 QWebEngineView

步调 1：在 .pro 文件中添加模块

要利用 Qt WebEngine，需要在 .pro 文件中包含 webenginewidgets 模块：

1. QT += webenginewidgets

复制代码

步调 2：代码示例

以下是一个简单的代码示例，展示如何利用 QWebEngineView 加载并显示一个网页：

1. #include <QApplication>
2. #include <QWebEngineView>
4. int main(int argc, char *argv[])
5. {
6.     QApplication app(argc, argv);
8.     QWebEngineView view;
9.     view.setUrl(QUrl("https://www.qt.io"));  // 加载网页
10.     view.resize(1024, 768);
11.     view.show();
13.     return app.exec();
14. }

复制代码

3. Qt WebEngine 的常用功能

加载网页

可以利用 QWebEngineView::setUrl() 或 QWebEnginePage::load() 方法加载网页。例如：

1. QWebEngineView *view = new QWebEngineView;
2. view->setUrl(QUrl("https://www.example.com"));

复制代码

运行 JavaScript

可以通过 QWebEnginePage::runJavaScript() 方法在页面上运行 JavaScript 代码，并可以获取返回值。例如：

1. view->page()->runJavaScript("document.title", [](const QVariant &result){
2.     qDebug() << "Page title:" << result.toString();
3. });

复制代码

处置处罚页面导航

QWebEnginePage 提供了导航控制信号，例如 loadStarted()、loadProgress() 和 loadFinished()。可以通过这些信号实现加载进度条等功能。

1. connect(view->page(), &QWebEnginePage::loadFinished, [](bool ok) {
2.     if (ok) {
3.         qDebug() << "Page loaded successfully!";
4.     } else {
5.         qDebug() << "Failed to load page.";
6.     }
7. });

复制代码

与 JavaScript 交互

可以利用 QWebChannel 将 C++ 对象袒露给网页，以便在 JavaScript 中调用。需要利用 qwebchannel.js 文件（在 Qt WebEngine 安装目录中找到）来启用此功能。

1. // 在 C++ 中
2. class WebBridge : public QObject {
3.     Q_OBJECT
4. public slots:
5.     void cppFunction() {
6.         qDebug() << "C++ function called from JavaScript!";
7.     }
8. };
10. // 将 C++ 对象暴露给 JavaScript
11. QWebEngineView *view = new QWebEngineView;
12. QWebChannel *channel = new QWebChannel(view->page());
13. WebBridge *bridge = new WebBridge();
14. channel->registerObject(QStringLiteral("bridge"), bridge);
15. view->page()->setWebChannel(channel);
16. view->setUrl(QUrl("qrc:/webpage.html"));  // 加载网页

复制代码

1. // 在 JavaScript 中调用 C++ 函数（网页内容）
2. bridge.cppFunction();

复制代码

自定义浏览设置

可以利用 QWebEngineSettings 配置是否启用 JavaScript、自动加载图像等。例如：

1. view->settings()->setAttribute(QWebEngineSettings::JavascriptEnabled, true);
2. view->settings()->setAttribute(QWebEngineSettings::AutoLoadImages, true);

复制代码

文件下载管理

QWebEnginePage::profile() 可以获取 QWebEngineProfile 对象，从而管理下载。可以连接到 downloadRequested 信号处置处罚下载：

1. connect(view->page()->profile(), &QWebEngineProfile::downloadRequested,
2.         [](QWebEngineDownloadItem *download) {
3.             download->setPath("path/to/save/file");
4.             download->accept();
5.         });

复制代码

4. 注意事项

安装 Qt WebEngine

Qt WebEngine 并不是 Qt 的默认模块，在安装 Qt 时需要选中 Qt WebEngine 组件。如果已经安装 Qt，可以利用 Qt Maintenance Tool（维护工具）来添加 Qt WebEngine。
平台支持限制

Qt WebEngine 基于 Chromium 引擎，受限于一些平台，不支持 iOS，而且在嵌入式平台上大概需要额外的配置。
应用大小标题

由于包含 Chromium 引擎，Qt WebEngine 模块会明显增长应用程序的体积。对于不需要复杂 Web 功能的应用，可以思量利用 QTextBrowser 或其他更轻量级的方案。
权限与安全

Qt WebEngine 支持访问文件系统、摄像头等功能，如果您的应用访问这些敏感数据，请注意权限管理和用户隐私保护。
5. 常用信号和槽

• 加载进度信号：
  
  
  
  • loadStarted()：页面开始加载时发射。
    
  • loadProgress(int progress)：加载进度发生变革时发射。
    
  • loadFinished(bool ok)：页面加载完成时发射。
    
  
  
• 导航信号：
  
  
  
  • urlChanged(const QUrl &url)：页面 URL 改变时发射。
    
  • titleChanged(const QString &title)：页面标题改变时发射。
    
  
  
• 其他常用槽函数：
  
  
  
  • back()、forward()、reload() 和 stop()：控制页面的导航。
    
  • setZoomFactor(qreal factor)：设置页面的缩放因子。
    
  
  

6. 完备的 Qt WebEngine 应用示例

以下是一个完备的示例，包含了网页加载、JavaScript 运行、导航控制等根本功能：

1. #include <QApplication>
2. #include <QWebEngineView>
3. #include <QWebChannel>
4. #include <QPushButton>
5. #include <QVBoxLayout>
6. #include <QWidget>
8. class WebBridge : public QObject {
9.     Q_OBJECT
10. public slots:
11.     void cppFunction() {
12.         qDebug() << "C++ function called from JavaScript!";
13.     }
14. };
16. int main(int argc, char *argv[])
17. {
18.     QApplication app(argc, argv);
20.     // 创建 WebEngineView 和 WebChannel
21.     QWebEngineView view;
22.     QWebChannel channel;
23.     WebBridge bridge;
24.     channel.registerObject(QStringLiteral("bridge"), &bridge);
25.     view.page()->setWebChannel(&channel);
27.     // 加载本地页面或在线页面
28.     view.setUrl(QUrl("https://www.qt.io"));
29.     view.resize(1024, 768);
31.     // 加载 JavaScript
32.     view.page()->runJavaScript("console.log('Hello from JavaScript');");
34.     // 创建控制按钮
35.     QWidget window;
36.     QVBoxLayout layout(&window);
37.     QPushButton backButton("Back");
38.     QPushButton forwardButton("Forward");
39.     layout.addWidget(&backButton);
40.     layout.addWidget(&forwardButton);
41.     layout.addWidget(&view);
43.     // 信号槽连接
44.     QObject::connect(&backButton, &QPushButton::clicked, &view, &QWebEngineView::back);
45.     QObject::connect(&forwardButton, &QPushButton::clicked, &view, &QWebEngineView::forward);
47.     window.show();
49.     return app.exec();
50. }

复制代码

总结

Qt WebEngine 是一个功能强盛的模块，得当需要网页显示和 JavaScript 交互的应用。其基于 Chromium 内核，支持现代 Web 技能（如 HTML5、JavaScript、CSS3），可以用于构建嵌入式浏览器或 Web 应用集成。通过丰富的信号槽机制和自定义配置，Qt WebEngine 可以满意大部分嵌入网页的需求。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。