Qt实现简易的浏览器_qt 浏览器

一、Qt的webenginewidgets模块和MSVC2017编译环境的配置

1. webenginewidgets模块
   该模块需要在安装Qt时勾选Qt WebEngine。
   

2. MSVC2017编译环境的配置
   这里的MSVC选2017还是2015，根据自己Qt版本而定；我的Qt版本是5.14.2，支持MSVC2017或2019
   

3. 需要安装对应版本的VIsual Studio，如果你上一步选的是MSVC2015，那就去安装VS2015，
   我这里选择的MSVC2017，所以需要安装VS2017或者VS2019。

4. 在你的Qt项目中配置kit
   
   

二、Qt简易浏览器的实现

注意点：

1. 在pro文件中引入webenginewidgets模块，下面就是和使用其他控件一样玩就好了。

   QT += core gui webenginewidgets

2. 利用QWebEngineView类，在窗口中嵌入web页面
   但是直接用这个类创建对象，你会发现无法点击页面中的链接跳转到二级网页，这是因为QWebEngineView这个类，本身并没有对链接点击后的二级网页做加载操作，所以，我们需要重写类继承QWebEngineView类，进行函数覆盖，实现对二级网页的加载。

mywebengineview.h

#ifndef MYWEBENGINEVIEW_H
#define MYWEBENGINEVIEW_H

#include <QWebEngineView>

class MyWebEngineView : public QWebEngineView
{
    Q_OBJECT
public:
    explicit MyWebEngineView(QWidget* parent = Q_NULLPTR);

protected:
    //函数覆盖
    QWebEngineView *createWindow(QWebEnginePage::WebWindowType type);

public slots:
    void slotLinkHovered(const QString &);

private:
    //保存鼠标悬停的连接
    QUrl newLink;
};

#endif // MYWEBENGINEVIEW_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

mywebengineview.cpp

#include "mywebengineview.h"

MyWebEngineView::MyWebEngineView(QWidget* parent) : QWebEngineView(parent){
    connect(this->page(), &QWebEnginePage::linkHovered, this, &MyWebEngineView::slotLinkHovered);
}

QWebEngineView *MyWebEngineView::createWindow(QWebEnginePage::WebWindowType){
    //链接被点击时，会自动调用
    //但是由于基类QWebEngineView中此函数并没有干事，所以在此重写进行函数覆盖(多态)
    this->load(newLink);
    return nullptr;
}

void MyWebEngineView::slotLinkHovered(const QString &url){
    this->newLink.setUrl(url);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. 对窗口做优化，加入上一级、下一级网页按钮，加入地址框，以及加载按钮，将其与web页面一起嵌入到窗口中。
   widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QWebEngineView>
#include <QVBoxLayout>
#include <QHBoxLayout>
#include <mywebengineview.h>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
    QWebEngineView* myWeb;
    QVBoxLayout* myVLayout;
    QHBoxLayout* myHLayout;

public slots:
    void slotBtnAccess();
    void slotBtnBack();
    void slotBtnNext();
    void slotSetLineEditShow(const QUrl&);

};
#endif // WIDGET_H

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

widget.cpp

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget){
    ui->setupUi(this);
    this->setWindowTitle("Jerich-Browser");
    myWeb = new MyWebEngineView(this); //基类指针指向派生类对象
    myVLayout = new QVBoxLayout(this);
    myHLayout = new QHBoxLayout(this);
    //设置控件大小
    ui->lineEdit_addr->setFixedHeight(31);
    ui->btnAccess->setFixedSize(31, 31);
    ui->btnBack->setFixedSize(31, 31);
    ui->btnNext->setFixedSize(31, 31);
    //加入布局
    myHLayout->addWidget(ui->btnBack);
    myHLayout->addWidget(ui->btnNext);
    myHLayout->addWidget(ui->lineEdit_addr);
    myHLayout->addWidget(ui->btnAccess);
    myVLayout->addLayout(myHLayout);
    myVLayout->addWidget(myWeb);
    myVLayout->setMargin(1);
    //启动时加载网页
    myWeb->load(QUrl("https://www.baidu.com/"));

    connect(ui->btnAccess, &QPushButton::clicked, this, &Widget::slotBtnAccess);
    connect(ui->btnBack, &QPushButton::clicked, this, &Widget::slotBtnBack);
    connect(ui->btnNext, &QPushButton::clicked, this, &Widget::slotBtnNext);
    connect(myWeb, &MyWebEngineView::urlChanged, this, &Widget::slotSetLineEditShow);
}

Widget::~Widget(){
    delete myHLayout;
    delete myVLayout;
    delete myWeb;
    delete ui;
}

void Widget::slotBtnAccess(){
    myWeb->load(QUrl(ui->lineEdit_addr->text()));
}

void Widget::slotBtnBack(){
    myWeb->back();
}

void Widget::slotBtnNext(){
    myWeb->forward();
}

void Widget::slotSetLineEditShow(const QUrl &url){
    ui->lineEdit_addr->setText(url.toString());
    ui->lineEdit_addr->setCursorPosition(0);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

4. 效果图