Qt内嵌web技术及透明问题解决

HunterFlying

已于 2023-12-27 08:26:07 修改

阅读量2.6k

点赞数 23

CC 4.0 BY-SA版权

文章标签： qt 开发语言 windows

于 2023-12-27 08:24:14 首次发布

本文链接：https://blog.csdn.net/qq_31286321/article/details/135183261

文章目录

1 基本使用

本节先完整梳理下Qt内嵌Web相关模块、类和基本用法，

在这里插入图片描述

模块架构

在这里插入图片描述

1.1 WebEngine Widgets

WebEngine Widgets提供了用于将Web内容嵌入QWidget等窗口控件，

1）组件组成

类名	功能
`QWebEngineView`	用于展示`web`，提供加载`url`、导航历史、页面缩放等接口
`QWebEnginePage`	用于表示`web`页面，提供执行`js`方法、处理表单、截图等接口
`QWebEngineProfile`	用于表示浏览器配置文件，提供设置缓存、`cookie`和安全策略等接口
`QWebEngineSettings`	用于表示浏览器设置，提供设置`web`字体、颜色、`js`和插件等接口

2）组件关系

在这里插入图片描述

Qt WebEngine基于QNetworkAccessManager和QSslSocket处理网络通信、证书验证等。

1.2 QWebEngineView

QWebEngineView是Qt内嵌web的关键控件，支持HTML5、js和CSS3。

1）示例代码

QWebEngineView view;
view.load(QUrl("https://www.baidum.com"));
view.show();

1.3 QWebEnginePage

QWebEnginePage用于表示加载到QWebEngineView中的web页面。

1）示例代码

QWebEngineView view;
QWebEnginePage page;
view.setPage(&page);
page.load(QUrl("https://www.baidu.com"));
view.show();

2）常用方法

名称	作用
`loadStarted`/`loadProgress`/`loadFinished`	用于监听页面加载状态
`urlChanged`	用于监听页面`url`变更
`runJavaScript`	用于执行页面中的`js`代码

3）懒加载

从page源码学习下Qt懒加载C++代码写法，

QWebEnginePage* QWebEngineView::page() const
{
   
   
    Q_D(const QWebEngineView);
    if (!d->page) {
   
   
        QWebEngineView *that = const_cast<QWebEngineView*>(this);
        that->setPage(new QWebEnginePage(that));
        d->m_ownsPage = true;
    }
    return d->page;
}

1.4 QWebEngineSettings

QWebEngineSettings用于配置web设置选项，包括字体、缩放、js支持和插件支持等。

1）常用方法

名称	作用
`setFontFamily`	用于设置字体、样式
`setFontSize`	用于设置字体大小
`setAttribute`	用于开启/关闭特性，包括`js`支持、插件支持（`flash`和视频解码器等）、本地存储、离线`web`应用、错误页面等
`setUnknownUrlSchemePolicy`	用于配置跨域访问策略

2）示例代码

QWebEngineView view;
QWebEngineSettings *settings = view.page()->settings();
settings->setFontFamily(QWebEngineSettings::StandardFont, "黑体");
settings->setFontSize(QWebEngineSettings::DefaultFontSize, 20);
settings->setAttribute(QWebEngineSettings::JavascriptEnabled, true);
settings->setAttribute(QWebEngineSettings::PluginsEnabled, true);
view.load(QUrl("https://www.baidu.com"));
view.show();

1.5 QWebEngineScript

QWebEngineScript支持通过注入js脚本到网页来新增/修改现有功能，可以配置脚本执行时机（web加载开始或结束）。

1）示例代码

QWebEngineView view;
QWebEnginePage page;
QWebEngineScript script;
script.setName("testScript");
script.setSourceCode("alert('test script');");
script.setInjectionPoint(QWebEngineScript::DocumentReady);
script.setRunsOnSubFrames(false);
script.setWorldId(QWebEngineScript::ApplicationWorld);
page.scripts().insert(script);
view.setPage(&page);
page.load(QUrl("https://www.baidu.com"));
view.show();

1.6 QWebEngineScriptCollection

用于管理 QWebEnginePage 实例中的所有脚本。

1.7 QWebEngineFullScreenRequest

当web触发全屏模式请求时，如HTML5``video元素的全屏按钮，QWebEnginePage发出fullScreenRequested信号，QWebEngineFullScreenRequest对象作为该信号的惨数传递，用于处理web发出的全屏显示请求。

1）常用方法

名称	作用
`reject`	用于拒绝全屏请求
`accept`	用于接受全屏请求
`toggleOn`	用于·表示请求是进入全屏模式还是退出全屏模式
`origin`	用于获取发出全屏请求的`web`元素

2）示例代码

#include <QWebEngineView>
#include <QWebEnginePage>
#include <QWebEngineFullScreenRequest>

class TestWebEngineView : public QWebEngineView
{
   
   
    Q_OBJECT

public:
    MyWebEngineView() {
   
   
        connect(page(), SIGNAL(fullScreenRequested(QWebEngineFullScreenRequest)),
                this, SLOT(slotFullScreenRequested(QWebEngineFullScreenRequest));
    }

private slots:
    void slotFullScreenRequested(QWebEngineFullScreenRequest request) {
   
   
        if (request.toggleOn()) {
   
   
            showFullScreen();
        } else {
   
   
            showNormal();
            }
        request.accept();
    }
};

1.8 QWebEngineCertificateError

QWebEngineCertificateError用于处理SSL证书错误，当QWebEnginePage加载使用 SSL加密的网页时，遇到证书错误，函数certificateError会被执行，QWebEngineCertificateError对象作为参数传递。

1）常用方法

名称	作用
`error`	用于获取错误类型
`errorDescription`	用于获取错误描述
`url`	用于获取错误`url`
`ignoreCertificateError`	用于忽略错误并继续加载`web`

2）示例代码

#include <QWebEngineView>
#include <QWebEnginePage>
#include <QWebEngineCertificateError>

class TestWebEnginePage : public QWebEnginePage
{
   
   
    Q_OBJECT

protected:
    bool certificateError(const QWebEngineCertificateError &error) override
    {
   
   
        if (error.error() == QWebEngineCertificateError::CertificateAuthorityInvalid)
        {
   
   
            qDebug() << "Ignoring certificate error:" << error.errorDescription();
            return true;
        }
        return false;
    }
};

1.9 QWebEngineClientCertificateSelection

QWebEngineClientCertificateSelection用于处理客户端证书选择，当服务器要求客户端提供证书进行身份验证时，QWebEnginePage 会发出一个 selectClientCertificate信号，携带参数 QWebEngineClientCertificateSelection对象，可使用该类选择一个合适的客户端证书，返回给服务器。

1）常用方法

名称	作用
`certificates`	用于获取客户端可用证书列表
`select`	用于从可用证书列表中选择1个，返回给服务器
`host`	用于获取服务器发请求的`url`

2）示例代码

#include <QWebEngineView>
#include <QWebEnginePage>
#include <QWebEngineClientCertificateSelection>

class TestWebEnginePage : public QWebEnginePage
{
   
   
    Q_OBJECT

public:
    TestWebEnginePage()
    {
   
   
        connect(this, &QWebEnginePage::selectClientCertificate,
                this, &MyWebEnginePage::handleClientCertificateSelection);
    }

private slots:
    void handleClientCertificateSelection(QWebEngineClientCertificateSelection selection)
    {
   
   
        if (!selection.certificates().isEmpty())
        {
   
   
            selection.select(selection.certificates().first());
        } else
        {
   
   
            selection.select(QSslCertificate());
        }
    }
};

1.10 QWebEngineDownloadItem

QWebEngineDownloadItem用于表示下载项。当用户触发下载请求（点击下载链接），QWebEngineProfile 发出downloadRequested信号，携带参数QWebEngineDownloadItem对象，可用于获取下载项信息、控制下载过程。

1）常用方法

名称	作用
`state`	用于获取下载项的当前状态，如下载中、已完成、已取消等
`totalBytes`	用于获取下载项的总字节信息
`receivedBytes`	用于获取提供了下载项的已接收字节信息
`url`	用于获取下载项的源`url`
`setPath`	用于设置下载项的保存路径

2）示例代码

#include <QApplication>
#include <QWebEngineView>
#include <QWebEngineProfile>
#include <QWebEngineDownloadItem>
#include <QStandardPaths>

class MyWebEngineProfile : public QWebEngineProfile
{
   
   
    Q_OBJECT

public:
    MyWebEngineProfile()
    {
   
   
        connect(this, &QWebEngineProfile::downloadRequested,
                this, &MyWebEngineProfile::handleDownloadRequested);
    }

private slots:
    void handleDownloadRequested(QWebEngineDownloadItem *download)
    {
   
   
        QString downloadPath = QStandardPaths::writableLocation(QStandardPaths::DownloadLocation);
        download->setPath(downloadPath + "/" + download->downloadFileName());
        download->accept();
        connect(download, &QWebEngineDownloadItem::downloadProgress,
                this, &MyWebEngineProfile::handleDownloadProgress);
        connect(download, &QWebEngineDownloadItem::finished,
                this, &MyWebEngineProfile::handleDownloadFinished);
    }

    void handleDownloadProgress(qint64 bytesReceived, qint64 bytesTotal)
    {
   
   
        qDebug() << "Download progress:" << bytesReceived << "/" << bytesTotal;
    }

    void handleDownloadFinished()
    {
   
   
        qDebug() << "Download finished.";
    }
};

1.11 QWebEngineContextMenuData

QWebEngineContextMenuData用于提供上下文菜单数据，当用户在QWebEngineView中右击，QWebEnginePage 发出contextMenuRequested信号，携带参数QWebEngineContextMenuData对象，可用该对象获取上下文菜单信息，根据需要创建和显示上下文菜单。

1）常用方法

名称	作用
`position`	用于获取触发位置对应鼠标坐标
`selectedText`	用于获取触发位置附近的选中文本
`linkText`	用于获取触发位置所包含链接的文本
`linkUrl`	用于获取触发位置所包含链接的`url`
`mediaUrl`	用于获取触发位置所包含图像的`url`
`mediaType`	用于获取触发位置所包含媒体元素的类型

2）示例代码

#include <QWebEngineView>
#include <QWebEnginePage>
#include <QWebEngineContextMenuData>
#include <QMenu>

class TestWebEnginePage : public QWebEnginePage
{
   
   
    Q_OBJECT

public:
    TestWebEnginePage()
    {
   
   
        connect(this, &QWebEnginePage::contextMenuRequested,
                this, &TestWebEnginePage::handleContextMenuRequested);
    }

private slots: