Qt与QWebEngineView 交互示例参考

Shaw0xyz · 发表于 2024-6-9 12:52:53

本帖最后由 Shaw0xyz 于 2024-6-9 14:09 编辑

1. 简介

Qt是一个跨平台的C++应用程序开发框架，广泛应用于图形界面应用的开发。QWebEngineView是Qt提供的一个用于显示和处理Web内容的组件，基于Chromium引擎，支持现代Web标准和技术。本文将介绍如何在Qt应用中使用QWebEngineView，并实现与网页内容的交互。

1.1 准备工作

在开始之前，请确保已经安装了Qt和相关的开发工具。如果尚未安装，可以从Qt官方网站下载并安装。

2. 创建Qt项目

首先，我们需要创建一个新的Qt项目，并配置QWebEngineView。

2.1 创建项目

在Qt Creator中，选择“File” -> “New File or Project”，选择“Application”下的“Qt Widgets Application”，然后按照向导创建一个新的项目，命名为“WebEngineExample”。

2.2 配置pro文件

在项目的.pro文件中，添加以下内容，以启用QWebEngine：

QT += core gui webenginewidgets
TARGET = WebEngineExample
TEMPLATE = app
SOURCES += main.cpp \
mainwindow.cpp
HEADERS += mainwindow.h
FORMS += mainwindow.ui

复制代码

3. 添加QWebEngineView

在项目中添加QWebEngineView组件，并设置其基本属性。

3.1 修改UI文件

打开mainwindow.ui文件，拖拽一个QWebEngineView组件到主窗口中，命名为webEngineView。

3.2 设置初始页面

在mainwindow.cpp中，添加以下代码以设置QWebEngineView的初始页面：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QWebEngineView>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->webEngineView->setUrl(QUrl("https://www.example.com"));
}
MainWindow::~MainWindow()
{
delete ui;
}

复制代码

4. 与网页内容交互

QWebEngineView提供了与网页内容交互的功能，可以通过javaScript与HTML元素进行交互。

4.1 注入JavaScript代码

在QWebEngineView加载完成后，可以注入JavaScript代码，以便与网页内容交互：

connect(ui->webEngineView, &QWebEngineView::loadFinished, this, [=](bool success){
if(success){
ui->webEngineView->page()->runJavaScript("document.body.style.backgroundColor = 'lightblue';");
}
});

复制代码

4.2 调用JavaScript函数

可以通过QWebEngineView调用网页中的JavaScript函数，并处理返回值：

ui->webEngineView->page()->runJavaScript("getValueFromPage();", [=](const QVariant &result){
qDebug() << "Value from page:" << result.toString();
});

复制代码

4.3 与Qt槽函数交互

可以在JavaScript中调用Qt的槽函数，实现更复杂的交互。首先，在Qt中定义一个槽函数：

public slots:
void onButtonClicked(QString message);

复制代码

然后，在JavaScript中调用该槽函数：

ui->webEngineView->page()->runJavaScript("window.qt.onButtonClicked('Hello from JavaScript');");

复制代码

5. 代码示例

以下是一个完整的示例代码，展示如何在Qt中使用QWebEngineView与网页内容交互：

main.cpp：

#include "mainwindow.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
w.show();
return a.exec();
}

复制代码

mainwindow.h：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QWebEngineView>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = nullptr);
~MainWindow();
public slots:
void onButtonClicked(QString message);
private:
Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

复制代码

mainwindow.cpp：

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->webEngineView->setUrl(QUrl("https://www.example.com"));
connect(ui->webEngineView, &QWebEngineView::loadFinished, this, [=](bool success){
if(success){
ui->webEngineView->page()->runJavaScript("document.body.style.backgroundColor = 'lightblue';");
}
});
ui->webEngineView->page()->runJavaScript("window.qt.onButtonClicked = function(message) { console.log(message); }");
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::onButtonClicked(QString message)
{
qDebug() << "Message from JavaScript:" << message;
}

复制代码

6. 结论

通过本文的介绍，我们学习了如何在Qt中使用QWebEngineView，并实现与网页内容的交互。QWebEngineView强大的功能使得在Qt应用中集成Web内容变得简单高效。希望本文能帮助你更好地理解和应用QWebEngineView，实现更多复杂和有趣的功能。

/ 荔枝学姐de课后专栏 /

Hi！这里是荔枝学姐~

欢迎来到我的课后专栏

自然语言学渣 NLP摆烂姐

热衷于技术写作 IT边角料

AIGC & Coding & linux ...

~互撩~ TG: @Shaw_0xyz

		自动登录	找回密码
密码			立即注册

[其它] Qt与QWebEngineView 交互示例参考