文章目录
一、前言
使用 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浏览器的便捷类。