Qt与QWebEngineView 交互示例参考
本帖最后由 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
页:
[1]