QWebEngineView的基本介绍和演示

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

`QWebEngineView` 的基本功能

显示网页：
- 加载并显示网页内容。
- 支持 HTML、CSS、JavaScript 等现代 Web 技术。
与 JavaScript 交互：
- 可以在 C++ 中调用 JavaScript 函数。
- 可以在 JavaScript 中调用 C++ 函数。
自定义 Web 内容：
- 加载本地 HTML 文件或自定义 HTML 字符串。
- 支持自定义 URL 拦截和资源加载。
开发者工具：
- 支持打开 Chromium 开发者工具，用于调试网页。
多窗口支持：
- 支持在新窗口中打开链接。

`QWebEngineView` 的基本用法

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

示例代码

#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 文件，例如：

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

与 JavaScript 交互

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

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

#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++ 函数。

#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：

<!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 请求。

#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 打开开发者工具。

#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 @ 2025-02-26 10:35 远方是什么样子阅读(484) 评论(0) 收藏举报

刷新页面返回顶部