Qt实现网页内嵌

文章目录

一、环境准备

二、代码实现

三、测试


一、环境准备

首先,确保你的Qt安装包含了QtWebEngine模块。我的Qt是5.12.9并且使用MSVC来编译项目。在项目文件中需要添加以下配置,其中在Qt中配置MSVC,建议去看看这位大佬的博客:Qt 添加MSVC2017编译器(2022年保姆级教程,不安装完整VS)_qt msvc2017-CSDN博客

确保:

复制代码
QT += core gui webenginewidgets

二、代码实现

mainwindow.cpp,主要实现的简单网页浏览器,其通过QWebEngineView组件实现了网页内嵌功能。如下为测试demo文件代码:

复制代码
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QWebEngineView>
#include <QWebEnginePage>
#include <QWebEngineProfile>
#include <QStyle>
#include <QApplication>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 设置窗口标题和大小
    setWindowTitle("Web Browser");
    resize(1024, 768);

    // 创建工具栏
    toolBar = new QToolBar(this);
    addToolBar(toolBar);

    // 创建地址栏
    urlLineEdit = new QLineEdit(this);
    urlLineEdit->setPlaceholderText("Enter URL (e.g., https://www.google.com)");
    urlLineEdit->setStyleSheet("QLineEdit { padding: 5px; border-radius: 3px; }");
    toolBar->addWidget(urlLineEdit);

    // 创建前进按钮
    goButton = new QPushButton("Go", this);
    goButton->setStyleSheet("QPushButton { padding: 5px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; }"
                           "QPushButton:hover { background-color: #45a049; }");
    toolBar->addWidget(goButton);

    // 创建网页视图
    webView = new QWebEngineView(this);
    setCentralWidget(webView);

    // 创建进度条
    progressBar = new QProgressBar(this);
    progressBar->setMaximumHeight(2);
    progressBar->setTextVisible(false);
    progressBar->setStyleSheet("QProgressBar { border: none; background-color: #f0f0f0; }"
                              "QProgressBar::chunk { background-color: #4CAF50; }");
    statusBar()->addPermanentWidget(progressBar);

    // 连接信号和槽
    connect(goButton, &QPushButton::clicked, this, &MainWindow::loadPage);
    connect(urlLineEdit, &QLineEdit::returnPressed, this, &MainWindow::loadPage);
    connect(webView, &QWebEngineView::urlChanged, this, &MainWindow::updateUrl);
    connect(webView, &QWebEngineView::loadProgress, this, &MainWindow::updateProgress);
    connect(webView, &QWebEngineView::titleChanged, this, &MainWindow::updateTitle);

    // 设置初始页面
    webView->setUrl(QUrl("https://www.google.com"));
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::loadPage()
{
    QString url = urlLineEdit->text();
    if (!url.startsWith("http://") && !url.startsWith("https://")) {
        url = "https://" + url;
    }
    webView->setUrl(QUrl(url));
}

void MainWindow::updateUrl(const QUrl &url)
{
    urlLineEdit->setText(url.toString());
}

void MainWindow::updateProgress(int progress)
{
    progressBar->setValue(progress);
    if (progress == 100) {
        progressBar->hide();
    } else {
        progressBar->show();
    }
}

void MainWindow::updateTitle(const QString &title)
{
    setWindowTitle(title + " - Web Browser");
}

三、测试

1.打开博客网页:

2.打开B站网页:

合理!!!!!

相关推荐
牧码岛33 分钟前
Web前端之隐藏元素方式的区别、Vue循环标签的时候在同一标签上隐藏元素的解决办法、hidden、display、visibility
前端·css·vue·html·web·web前端
yxc_inspire2 小时前
基于Qt的app开发第十三天
c++·qt·app·tcp·面向对象
潇-xiao3 小时前
Qt 按钮类控件(Push Button 与 Radio Button)(1)
c++·qt
追风赶月、4 小时前
【QT】认识QT
开发语言·qt
溟洵8 小时前
【C++ Qt】窗口(Qt窗口框架、菜单栏QMenuBar)
c++·qt
Wyn_9 小时前
【QT】qtdesigner中将控件提升为自定义控件后,css设置样式不生效(已解决,图文详情)
开发语言·qt
道剑剑非道10 小时前
QT开发技术【ffmpeg + QAudioOutput】音乐播放器
开发语言·qt·ffmpeg
@残梦10 小时前
129、QT搭建FFmpeg环境
开发语言·qt·ffmpeg
一心赚狗粮的宇叔20 小时前
web全栈开发学习-01html基础
前端·javascript·学习·html·web