Qt WebEngine（05）：QWebEngineView 类【案例】

一、前言

使用 QWebEngineView 小控件写一个简单的嵌入到QWidget里面的浏览器。

二、浏览器基本功能

2.1 网页的前进后退刷新停止

QWebEngineView 有四个槽函数：back() 、forward()、reload()、stop() 实现了页面的导航功能。

用四个按钮来触发相对应的4个槽函数。

2.2 网页的地址栏

QLineEdit 控件显示页面的地址。

QLineEdit 的回车事件 对应 QWebEngineView 的 setUrl() 或者 load() 函数。

如果页面URL变更，则更新QLineEdit 的地址文本

2.3 页面的放大和缩小

用2个按钮来设置QWebEngineView 的缩放因子，然后QWebEngineView 会自动进行缩放。

2.4 设置网页的图标

利用的QWebEngineView 的icon属性变更事件，将网站的favicon.ico 设置为程序的窗口图标。

2.5 显示网页加载的进度

利用的QWebEngineView 的progressChanged，显示在窗口标题后面。

2.6 显示网页标题

利用的QWebEngineView 的titleChanged事件，设置程序的窗口标题

2.7 链接页面的加载

QWebEngineView 的文档介绍的很详细，以上的功能实现起来都很简单。

唯有createWindow()函数没有怎么讲解，这个函数是被底层的QWebEnginePage类调用的，分为新建窗口、新建标签页等要求。如果不需要新建页面或者窗口，那就需要子类化QWebEngineView ，并重写createWindow() 函数。本案例在覆写该方法时，简单地加载新的URL，达到浏览链接页面的目的。

三、程序GUI布局

四、代码

4.1 Widget类定义

class Widget : public QWidget
{
    Q_OBJECT

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

4.2 Widget类实现

#include "Widget.h"
#include <QtWebEngineWidgets>
#include "MyWebEngineView.h"
Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    MyWebEngineView *view = new MyWebEngineView;
    QVBoxLayout *mainLayout = new QVBoxLayout(this);

    QPushButton *forword = new QPushButton("前进");
    QPushButton *back = new QPushButton("后退");
    QPushButton *reload = new QPushButton("刷新");
    QPushButton *stop = new QPushButton("停止");

    QHBoxLayout *topLayout = new QHBoxLayout;
    topLayout->addWidget(back);
    topLayout->addWidget(forword);
    topLayout->addWidget(reload);
    topLayout->addWidget(stop);

    connect(forword,&QPushButton::clicked,view,&MyWebEngineView::forward);
    connect(back,&QPushButton::clicked,view,&MyWebEngineView::back);
    connect(reload,&QPushButton::clicked,view,&MyWebEngineView::reload);
    connect(stop,&QPushButton::clicked,view,&MyWebEngineView::stop);

    QLineEdit *urlInput = new QLineEdit;
    urlInput->setPlaceholderText("http://");
    urlInput->setText("http://www.baidu.com");

    connect(urlInput,&QLineEdit::returnPressed,[=](){
        view->load(QUrl(urlInput->text()));
    });

    connect(view,&MyWebEngineView::urlChanged,[=](){
        if(view->url().isValid())
            urlInput->setText(view->url().toString());
    });

    topLayout->addWidget(urlInput);

    QPushButton *zoomin = new QPushButton("放大");
    QPushButton *zoomout = new QPushButton("缩小");
    topLayout->addWidget(zoomin);
    topLayout->addWidget(zoomout);
    connect(zoomin,&QPushButton::clicked,[=](){
        if(view->zoomFactor()<5.0)
            view->setZoomFactor(view->zoomFactor()+0.1);
    });
    connect(zoomout,&QPushButton::clicked,[=](){
        if(view->zoomFactor()>0.25)
            view->setZoomFactor(view->zoomFactor()-0.1);
    });

    mainLayout->addLayout(topLayout);
    mainLayout->addWidget(view);

    view->load(QUrl(urlInput->text()));
}

4.3 MyWebEngineView类定义

#include <QtWebEngineWidgets>

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

    QWebEngineView * createWindow(QWebEnginePage::WebWindowType type) override;
    void linkHovered(QString url);
    void progressChanged(int progress);

private:
    QUrl newUrl;
};

4.3 MyWebEngineView类实现

#include "MyWebEngineView.h"

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

    connect(this,&QWebEngineView::iconChanged,[=](){
        this->window()->setWindowIcon(this->icon());
    });

    connect(this,&MyWebEngineView::titleChanged,[=](){
        this->window()->setWindowTitle(this->title());
    });
    connect(this,&MyWebEngineView::loadProgress,this,&MyWebEngineView::progressChanged);

}

//这个函数应该是由底层的QWebEnginePage发起调用的，如果不想新建QWebEngineView，在这儿覆写。
QWebEngineView *MyWebEngineView::createWindow(QWebEnginePage::WebWindowType type)
{
    Q_UNUSED(type)
    this->load(newUrl);
//    this->setUrl(newUrl);
    return 0;
}

void MyWebEngineView::linkHovered(QString url)
{
    newUrl = QUrl(url);
}

void MyWebEngineView::progressChanged(int progress)
{
    if(progress==100)
        this->window()->setWindowTitle(this->title());
    else
        this->window()->setWindowTitle(this->title()+QString(" - %1%").arg(progress));

}

4.5 主函数

#include "Widget.h"

#include <QApplication>
#include <QtWebEngineWidgets>
#include <QtWebEngine>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    Widget view;
    view.showMaximized();
    view.show();

    return a.exec();
}

4.6 qmake

QT       += core gui webenginewidgets webengine

4.7 注意编译器的选择

10、总结

QWebEngineView 类是一个实现Web浏览器的便捷类。