QT之QWebEngineView详细介绍

此篇文章来源于自己学习QT的QWebEngineView类总结的知识点，本人能力有限，若文章有其他错误，大家评论区评论，共同学习，共同进步。

一、QWebEngineView介绍

QWebEngineView是Qt框架中的一个组件，它是基于Chromium内核的Web浏览器引擎，用于在Qt应用程序中嵌入网页内容和实现各种Web应用功能。通过QWebEngineView，开发者可以在本地桌面应用程序中轻松地集成网页浏览功能，支持HTML5、CSS3、JavaScript等现代Web技术。

注意：QWebEngineView类仅支持QT的5.4版本以上，之前的版本都是使用QtWebKit，QtWebKit类在5.4版本以上已经被丢弃了，不能使用了。而对于QWebEngineView类，仅仅支持MSVC的编译器并不支持MinGW。

1. 加载并显示网页内容。
2. 与网页中的JavaScript进行交互。
3. 监听和处理网页加载完成、加载失败等各种信号槽事件。
4. 实现网页导航控制（前进、后退、刷新）等功能。

在Qt Quick中，对应的功能类为QQuickWebEngineView，用于在QML场景中嵌入Web内容。

例如，创建并加载一个网页的基本用法如下：

#include <QWebEngineView>
#include <QApplication>

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

    QWebEngineView view;
    view.load(QUrl(QStringLiteral("http://www.example.com")));
    view.show();

    return app.exec();
}

以上代码会创建一个QWebEngineView窗口，并加载example.com网站的内容。

二、成员函数

1、QWebEngineView::QWebEngineView(QWidget*parent= Q_NULLPTR)

QWebEngineView::QWebEngineView(QWidget *parent = Q_NULLPTR)是Qt WebEngine模块中用于创建一个QWebEngineView对象的构造函数。

参数parent指向一个QWidget指针，它是QWebEngineView的父窗口或父控件。如果不传入参数（使用默认值Q_NULLPTR），则QWebEngineView将成为一个顶级窗口。如果指定了父控件，那么QWebEngineView将作为该父控件的子控件存在，并遵循父控件的生命周期和布局规则。

简而言之，这段代码：

QWebEngineView *webView = new QWebEngineView(parentWidget);

将会创建一个新的QWebEngineView实例，并将其父控件设置为parentWidget。如果需要在窗口中显示一个能够浏览网页内容的视图，这就是创建该视图的基本步骤。随后可以调用webView->load(QUrl(url))来加载指定的网页URL。

2、voidQWebEngineView::back()

void QWebEngineView::back()是Qt WebEngine模块中的一个成员函数，应用于QWebEngineView类。该函数的作用是让QWebEngineView中的网页浏览器历史回退一步，即显示上一个访问过的网页。

在实际应用中，如果你有一个QWebEngineView对象（比如命名为webView），并且用户已经在该浏览器控件中浏览了几个网页，调用webView->back();就会让浏览器返回到前一个页面，就像在常规Web浏览器中点击“后退”按钮一样。

以下是一个使用QWebEngineView和back()函数的简单代码示例：

#include <QApplication>
#include <QWebEngineView>
#include <QUrl>

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

    // 创建一个QWebEngineView实例
    QWebEngineView* webView = new QWebEngineView();

    // 加载一个网页
    webView->load(QUrl("https://www.example.com"));

    // 显示QWebEngineView
    webView->show();

    // 假设用户已经浏览了一些页面，现在模拟点击“后退”按钮
    if (webView->history()->canGoBack()) {
        webView->back(); // 回退到上一个页面
    }

    return app.exec();
}

在这个例子中，首先创建了一个QWebEngineView实例，并加载了一个网页。然后，检查webView的历史记录中是否可以回退（即是否至少有两个页面），如果可以，则调用back()函数来实现页面回退的功能。在实际应用中，通常会将back()函数的调用绑定到一个按钮的点击事件上，以供用户手动触发页面回退行为。

3、voidQWebEngineView::forward()

void QWebEngineView::forward()是Qt WebEngine模块中的一个成员函数，用于QWebEngineView类。这个函数的作用是在网页浏览历史中向前推进一步，即显示下一个访问过的网页。

在实际应用中，如果你有一个QWebEngineView对象（例如webView），并且用户已经在该浏览器控件中浏览了若干网页，并且当前处于历史记录的前一个页面，调用webView->forward();就会让浏览器跳转到下一个页面，就如同在常规Web浏览器中点击“前进”按钮一样。

下面是一个使用forward()函数的基本示例：

#include <QApplication>
#include <QWebEngineView>
#include <QUrl>

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

    // 创建一个QWebEngineView实例
    QWebEngineView* webView = new QWebEngineView();

    // 加载一个初始网页
    webView->load(QUrl("https://www.example.com"));

    // 用户浏览了其他页面，现在假设已经按后退按钮回到了之前的页面
    if (webView->history()->canGoForward()) { // 检查是否可以前进到下一个页面
        webView->back(); // 先模拟后退一步
        webView->forward(); // 然后模拟前进到下一个页面
    }

    // 显示QWebEngineView
    webView->show();

    return app.exec();
}

在这个示例中，我们首先加载了一个网页，然后假设用户进行了后退操作，并检查是否可以前进。如果可以，我们就调用forward()函数，让浏览器显示下一个页面。在真实应用中，通常会将forward()函数绑定到一个“前进”按钮的点击事件上。

4、voidQWebEngineView::iconChanged(constQIcon&icon)

void QWebEngineView::iconChanged(const QIcon &icon)是Qt WebEngine模块中QWebEngineView类的一个信号。当加载的网页图标（favicon）发生变化时，这个信号会被发射。

这个信号并没有一个对应的成员函数，而是作为一种通知机制，允许您连接到一个槽函数来响应网页图标的变化。例如，当您希望在地址栏或者书签中更新网页对应的图标时，可以这样做：

QObject::connect(webView, &QWebEngineView::iconChanged, [=](const QIcon &newIcon){
    // 更新地址栏或书签栏中的图标
    addressBar->setIcon(newIcon);
    bookmarksManager->updateBookmarkIcon(currentUrl, newIcon);
});

// 或者在槽函数中处理
connect(webView, SIGNAL(iconChanged(QIcon)), this, SLOT(updatePageIcon(QIcon)));

//槽函数
void YourClass::updatePageIcon(const QIcon &icon) {
    // 在这里处理图标变化，例如更新UI中的图标
    myStatusIcon->setIcon(icon);
}

请注意，上面的代码展示了Qt 5中的信号与槽连接方式，对于Qt 5.14及以后的版本，推荐使用lambda表达式或connect函数的第一个形式来连接信号和槽。在Qt 4风格的信号槽语法中，使用SIGNAL和SLOT宏。

5、voidQWebEngineView::iconUrlChanged(constQUrl&url)

void QWebEngineView::iconUrlChanged(const QUrl &url)是Qt WebEngine模块中QWebEngineView类的一个信号。当网页的图标URL（favicon URL）发生变化时，该信号会被发射。这个信号携带了一个QUrl类型的参数，该参数包含了新的图标资源的URL。

这个信号常用于监控网页favicon的更新，当网页的图标URL变化时，您可以连接到这个信号，并根据新的URL获取和更新对应的图标资源。

例如，通过信号槽机制，您可以捕获这个信号并做出相应动作：

QObject::connect(webView, &QWebEngineView::iconUrlChanged, [&](const QUrl &newIconUrl){
    // 新的图标URL已改变，可以在此处根据新的URL下载并更新图标
    // 下面的代码仅为示意，实际应用中可能需要异步下载并处理图标数据
    QImage iconImage = QImageReader(newIconUrl).read();
    if (!iconImage.isNull()) {
        myStatusBar->setIcon(QIcon(iconImage));
    }
});

void QWebEngineView::iconChanged(const QIcon &icon)和void QWebEngineView::iconUrlChanged(const QUrl &url)是Qt WebEngine模块中QWebEngineView类的两个不同信号，它们的区别在于提供的信息和处理方式：

1. iconChanged(const QIcon &icon)：

   • 这个信号是在网页的图标（favicon）实际内容发生变化时触发的。
   • 当网页的favicon加载完成或更新时，该信号会直接传递一个已经解析并加载好的图标对象（QIcon）。
   • 开发者可以直接使用这个图标对象更新UI，无需关心具体的URL和加载过程。

2. iconUrlChanged(const QUrl &url)：

   • 这个信号在网页的favicon URL发生变化时触发。
   • 该信号只提供新的图标资源的URL地址，而不提供已解析的图标数据。
   • 开发者需要根据这个URL自行加载图片资源（例如通过QImageReader等工具），然后转换成QIcon对象，最后更新UI。

总结来说，iconChanged提供了 favicon 图片的实体数据，可以直接用于界面更新；而iconUrlChanged提供的是图片资源的网址，开发者需要进一步处理才能获取到图片数据。在实际应用中，根据需求可以选择监听其中一个或两个信号，前者更适合快速更新UI，后者则提供了更大的灵活性，但需要额外的处理步骤。

6、voidQWebEngineView::loadFinished(bool_ok_)

void QWebEngineView::loadFinished(bool ok)是Qt WebEngine模块中QWebEngineView类的一个信号。当网页加载完毕时，不论加载成功与否，该信号都会被触发。

参数bool ok表示加载操作是否成功。如果ok为true，则表示网页加载顺利完成；如果为false，则表示加载过程中遇到了错误或中断。

开发者通常会连接到这个信号来执行网页加载完成后的后续操作，例如：

QObject::connect(webView, &QWebEngineView::loadFinished, [=](bool success){
    if (success) {
        qDebug() << "Web page loaded successfully.";
        // 执行加载成功后的操作，例如隐藏进度条、启用UI元素等
    } else {
        qDebug() << "Failed to load web page!";
        // 执行加载失败后的操作，例如显示错误信息、尝试重新加载等
    }
});

这个信号非常重要，因为它可以帮助开发者跟踪网页加载的状态，并根据加载结果执行相应的程序逻辑。

7、voidQWebEngineView::loadProgress(int_progress_)

void QWebEng