Qt | 实现基于Qt WebEngine Widgets的网页浏览器

1,330 阅读2分钟

Offer 驾到,掘友接招!我正在参与2022春招打卡活动,点击查看活动详情

前言:

Qt WebEngine模块提供了一个Web浏览器引擎,可以很容易地将万维网中的内容嵌入到Qt应用程序中。因为Qt WebEngine模块是基于Google Chromium项目的,Chromium现在并不支持MinGW进行构建,在Windows平台上需要使用MSVC 2013以上版本进行构建。

Qt WebEngine基于Chromium,但是其中并没有包含或使用Google Chrome浏览器提供的服务或者加载项。

Qt WebEngine架构:

Qt WebEngine中的功能被划分到3个不同的模块:

  • Qt WebEngine Widgets模块,用来创建基于C++ Widgets部件的Web程序;
  • Qt WebEngine模块,用来创建基于Qt Quick的Web程序;
  • Qt WebEngine Core模块,用来与Chromium交互。

基于Qt WebEngine Widgets的网页浏览器:

使用Qt WebEngine Widgets模块,需要在.pro文件中添加“QT += webenginewidgets”。

显示一个网页:

//在.h中添加类的前置声明
class QWebEngineView;
//在.h中添加私有成员对象
QWebEngineView *view;
//在.cpp中添加头文件
#include <QWebEngineView>
//构造函数中创建网页
view = new QWebEngineView(this);
view->load(QUrl("http://www.qter.org/"));
setCentralWidget(view);
resize(1024, 680);
  • 创建了一个QWebEngineView视图部件,用于显示网页内容;
  • 调用load() 函数加载要显示的网站地址;setUrl() 也可以用于加载网站,如果是现成的HTML文档,则可以使用setHtml() 函数来加载。
  • setCentralWidget() 将视图部件设置为主窗口的中心部件;

添加导航动作图标和地址栏:

//连接QWebEngineView发射的信号和自定义的槽函数
connect(view, &QWebEngineView::loadProgress, this, &MainWindow::setProgress);
connect(view, &QWebEngineView::titleChanged, this, &MainWindow::adjustTitle);
connect(view, &QWebEngineView::loadFinished, this, &MainWindow::finishLoading);
//向工具栏中添加动作和部件
ui->mainToolBar->addAction(view->pageAction(QWebEnginePage::Back));
ui->mainToolBar->addAction(view->pageAction(QWebEnginePage::Forward));
ui->mainToolBar->addAction(view->pageAction(QWebEnginePage::Reload));
ui->mainToolBar->addAction(view->pageAction(QWebEnginePage::Stop));
//添加导航栏
QLineEdit *locationEdit = new QLineEdit(this);
ui->mainToolBar->addWidget(locationEdit);
  • 当QWebEngineView开始加载时,会发射loadStarted() 信号;
  • 每当一个网页元素(例如一张图片或一个脚本等)加载完成时,都会发射loadProgress() 信号,如果加载成功,该信号参数为true,否则为false;
  • 可以使用title()函数来获取HTML文档的标题,如果标题发生了改变,则会发射titleChanged() 信号;
  • QWebEnginePage中通过枚举类型QWebEnginePage::WebAction定义了几十个常用的功能动作,比如前进后退等,可以在帮助文档中进行查看。