QWebEngineView的基本介绍和演示

QWebEngineView 是 Qt 提供的一个用于嵌入 Web 内容的控件，基于 Chromium 引擎（即 Google Chrome 使用的浏览器引擎）。它可以用于在 Qt 应用程序中显示网页、HTML 内容或与 JavaScript 交互。

QWebEngineView 的基本功能

  1. 显示网页：

    • 加载并显示网页内容。

    • 支持 HTML、CSS、JavaScript 等现代 Web 技术。

  2. 与 JavaScript 交互：

    • 可以在 C++ 中调用 JavaScript 函数。

    • 可以在 JavaScript 中调用 C++ 函数。

  3. 自定义 Web 内容：

    • 加载本地 HTML 文件或自定义 HTML 字符串。

    • 支持自定义 URL 拦截和资源加载。

  4. 开发者工具：

    • 支持打开 Chromium 开发者工具，用于调试网页。

  5. 多窗口支持：

    • 支持在新窗口中打开链接。

QWebEngineView 的基本用法

以下是一个简单的示例，展示如何使用 QWebEngineView 加载并显示网页。

示例代码

cpp
复制
#include <QApplication>
#include <QWebEngineView>
#include <QUrl>

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

    // 创建 QWebEngineView 对象
    QWebEngineView view;

    // 加载网页
    view.load(QUrl("https://www.qt.io"));

    // 设置窗口标题
    view.setWindowTitle("QWebEngineView Demo");

    // 显示窗口
    view.resize(800, 600);
    view.show();

    return app.exec();
}

加载本地 HTML 文件

QWebEngineView 可以加载本地 HTML 文件，例如：

cpp
复制
view.load(QUrl::fromLocalFile("/path/to/your/file.html"));

与 JavaScript 交互

1. 在 C++ 中调用 JavaScript 函数

可以通过 QWebEnginePage::runJavaScript 在 C++ 中调用 JavaScript 函数。

cpp
复制
#include <QWebEnginePage>
#include <QWebEngineView>
#include <QApplication>

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

    QWebEngineView view;
    view.load(QUrl("https://www.qt.io"));
    view.show();

    // 在页面加载完成后执行 JavaScript
    QObject::connect(view.page(), &QWebEnginePage::loadFinished, [&view](bool ok) {
        if (ok) {
            view.page()->runJavaScript("alert('Hello from C++!');");
        }
    });

    return app.exec();
}

2. 在 JavaScript 中调用 C++ 函数

可以通过 QWebChannel 在 JavaScript 中调用 C++ 函数。

cpp
复制
#include <QApplication>
#include <QWebEngineView>
#include <QWebChannel>
#include <QObject>
#include <QDebug>

class MyObject : public QObject {
    Q_OBJECT
public slots:
    void showMessage(const QString& message) {
        qDebug() << "Message from JavaScript:" << message;
    }
};

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

    QWebEngineView view;
    QWebChannel channel;

    MyObject myObject;
    channel.registerObject("myObject", &myObject);

    view.page()->setWebChannel(&channel);

    // 加载包含 WebChannel 的 HTML 文件
    view.load(QUrl::fromLocalFile("/path/to/your/file.html"));
    view.show();

    return app.exec();
}

在 HTML 文件中使用 WebChannel：

html
复制
<!DOCTYPE html>
<html>
<head>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            new QWebChannel(qt.webChannelTransport, function(channel) {
                var myObject = channel.objects.myObject;
                myObject.showMessage("Hello from JavaScript!");
            });
        });
    </script>
</head>
<body>
    <h1>WebChannel Demo</h1>
</body>
</html>
 
运行 HTML

自定义 URL 拦截

可以通过重写 QWebEnginePage::acceptNavigationRequest 来拦截 URL 请求。

cpp
复制
#include <QApplication>
#include <QWebEngineView>
#include <QWebEnginePage>

class MyWebPage : public QWebEnginePage {
    Q_OBJECT
public:
    MyWebPage(QObject* parent = nullptr) : QWebEnginePage(parent) {}

protected:
    bool acceptNavigationRequest(const QUrl& url, NavigationType type, bool isMainFrame) override {
        qDebug() << "Navigation request to:" << url;
        if (url.host() == "blocked.com") {
            qDebug() << "Blocked navigation to:" << url;
            return false; // 阻止导航
        }
        return QWebEnginePage::acceptNavigationRequest(url, type, isMainFrame);
    }
};

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

    QWebEngineView view;
    MyWebPage page;
    view.setPage(&page);

    view.load(QUrl("https://www.qt.io"));
    view.show();

    return app.exec();
}

#include "main.moc"

打开开发者工具

可以通过 QWebEngineView::page()->setDevToolsPage 打开开发者工具。

cpp
复制
#include <QApplication>
#include <QWebEngineView>

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

    QWebEngineView view;
    view.load(QUrl("https://www.qt.io"));
    view.show();

    // 打开开发者工具
    QWebEngineView devTools;
    view.page()->setDevToolsPage(devTools.page());
    devTools.show();

    return app.exec();
}

总结

  • QWebEngineView 是一个强大的控件，用于在 Qt 应用程序中嵌入 Web 内容。

  • 支持加载网页、本地 HTML 文件、与 JavaScript 交互等功能。

  • 可以通过 QWebChannel 实现 C++ 和 JavaScript 的双向通信。

  • 支持自定义 URL 拦截和开发者工具。

通过 QWebEngineView，你可以轻松地将现代 Web 技术集成到 Qt 应用程序中。

posted @   远方是什么样子  阅读(22)  评论(0)  编辑  收藏  举报
相关博文：
· 解决windows用cef浏览器、mac用QWebEngineView浏览器js调用客户端的问题
· Qt GUI开发简介
· Qt-Web混合开发-QWebEngineView加载网页最小示例（1） 原创
· Qt-Web混合开发-QWebEngineView加载网页最小示例（2） 原创
· PyQT5之QWebEngineView
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
历史上的今天：
2024-02-26 Windows下破解SecureCRT和SecureFx软件
点击右上角即可分享
微信分享提示