Qt实现网页内嵌

文章目录


一、环境准备
二、代码实现
三、测试
  

---

一、环境准备

首先，确保你的Qt安装包罗了QtWebEngine模块。我的Qt是5.12.9而且使用MSVC来编译项目。在项目文件中需要添加以下配置，其中在Qt中配置MSVC，发起去看看这位大佬的博客：Qt 添加MSVC2017编译器（2022年保姆级教程，不安装完备VS）_qt msvc2017-CSDN博客
确保：

1. QT += core gui webenginewidgets

复制代码

二、代码实现

mainwindow.cpp，重要实现的简朴网页欣赏器，其通过QWebEngineView组件实现了网页内嵌功能。如下为测试demo文件代码：

1. #include "mainwindow.h"
2. #include "ui_mainwindow.h"
3. #include <QWebEngineView>
4. #include <QWebEnginePage>
5. #include <QWebEngineProfile>
6. #include <QStyle>
7. #include <QApplication>
9. MainWindow::MainWindow(QWidget *parent)
10.     : QMainWindow(parent)
11.     , ui(new Ui::MainWindow)
12. {
13.     ui->setupUi(this);
15.     // 设置窗口标题和大小
16.     setWindowTitle("Web Browser");
17.     resize(1024, 768);
19.     // 创建工具栏
20.     toolBar = new QToolBar(this);
21.     addToolBar(toolBar);
23.     // 创建地址栏
24.     urlLineEdit = new QLineEdit(this);
25.     urlLineEdit->setPlaceholderText("Enter URL (e.g., https://www.google.com)");
26.     urlLineEdit->setStyleSheet("QLineEdit { padding: 5px; border-radius: 3px; }");
27.     toolBar->addWidget(urlLineEdit);
29.     // 创建前进按钮
30.     goButton = new QPushButton("Go", this);
31.     goButton->setStyleSheet("QPushButton { padding: 5px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 3px; }"
32.                            "QPushButton:hover { background-color: #45a049; }");
33.     toolBar->addWidget(goButton);
35.     // 创建网页视图
36.     webView = new QWebEngineView(this);
37.     setCentralWidget(webView);
39.     // 创建进度条
40.     progressBar = new QProgressBar(this);
41.     progressBar->setMaximumHeight(2);
42.     progressBar->setTextVisible(false);
43.     progressBar->setStyleSheet("QProgressBar { border: none; background-color: #f0f0f0; }"
44.                               "QProgressBar::chunk { background-color: #4CAF50; }");
45.     statusBar()->addPermanentWidget(progressBar);
47.     // 连接信号和槽
48.     connect(goButton, &QPushButton::clicked, this, &MainWindow::loadPage);
49.     connect(urlLineEdit, &QLineEdit::returnPressed, this, &MainWindow::loadPage);
50.     connect(webView, &QWebEngineView::urlChanged, this, &MainWindow::updateUrl);
51.     connect(webView, &QWebEngineView::loadProgress, this, &MainWindow::updateProgress);
52.     connect(webView, &QWebEngineView::titleChanged, this, &MainWindow::updateTitle);
54.     // 设置初始页面
55.     webView->setUrl(QUrl("https://www.google.com"));
56. }
58. MainWindow::~MainWindow()
59. {
60.     delete ui;
61. }
63. void MainWindow::loadPage()
64. {
65.     QString url = urlLineEdit->text();
66.     if (!url.startsWith("http://") && !url.startsWith("https://")) {
67.         url = "https://" + url;
68.     }
69.     webView->setUrl(QUrl(url));
70. }
72. void MainWindow::updateUrl(const QUrl &url)
73. {
74.     urlLineEdit->setText(url.toString());
75. }
77. void MainWindow::updateProgress(int progress)
78. {
79.     progressBar->setValue(progress);
80.     if (progress == 100) {
81.         progressBar->hide();
82.     } else {
83.         progressBar->show();
84.     }
85. }
87. void MainWindow::updateTitle(const QString &title)
88. {
89.     setWindowTitle(title + " - Web Browser");
90. }

复制代码

三、测试

1.打开博客网页：

2.打开B站网页： 

 
 公道！！！！！