如何使用 QT 與 html 元素交互

Question

例如，我有一個帶有按鈕和標簽（或其他東西）的簡單 HTML 頁面。 如何更改標簽（或其他內容）中的文本並使用 QT 捕獲按鈕單擊。 我嘗試使用 QWebEngineView 來顯示 html，但我不知道如何與 QT 模塊中的元素交互，只需更改 url，但我認為它不是更好的方法

Answer 1

為了能夠與使用 QWebEngine 呈現的 HTML 交互，您需要使用QWebChannel 。 您可以在Qt WebChannel JavaScript API 頁面找到基本指南。

要在 HTML 頁面中實現與 JavaScript 的互通，您需要：

在項目文件中添加Qt += webchannel
實現一個QObject派生類，它應該是 C++ 和 JavaScript 之間的代理。 使其在 JavaScript 中可用的最簡單方法是為您打算在 JavaScript 中使用的值創建 getter、setter 和信號，並將它們公開為Q_PROPERTY 。 例子：

class ProxyClass: public QObject
{
    Q_OBJECT

    Q_PROPERTY(QString value READ value WRITE setValue NOTIFY valueChanged)

public:
    explicit ProxyClass(QObject *parent = nullptr);

    QString value() const;
    void setValue(const QString &aValue);

signals:
    void valueChanged(const QString &aValue);

};

使用QWebEngineView::setHtml將 HTML 設置為 QWebEngineView，實例化您的“代理”類並為頁面創建 QWebChannel（請注意，您可以在 QWebChannel 中注冊多個對象）。 例子：

//create QWebEngineView and set HTML from resources
auto webView = new QWebEngineView;
QFile htmlFile(":/page.html");
htmlFile.open(QIODevice::ReadOnly);
QString html = htmlFile.readAll();
webView->setHtml(html);

//create and set up the instance of your "proxy" class
auto proxy = new ProxyClass;

//create QWebChannel and set it for the page
QWebChannel *webChannel = new QWebChannel(webView->page());
webChannel->registerObject(QStringLiteral("proxy"), proxy);
webView->page()->setWebChannel(webChannel);

在 HTML 中嵌入qwebchannel.js文件。 文件位於<Qt installation directory>/Examples/Qt-<version>/webchannel/shared目錄。 您可以將其包含在應用程序資源中並使用<script type="text/javascript" src="qrc:/qwebchannel.js"></script>嵌入 HTML
在 HTML 中創建onload事件處理程序並在其中初始化 QWebChannel。 例子：

function loaded() {
    new QWebChannel(qt.webChannelTransport, function (channel) {
        <!--get and assign "proxy"-->
        window.proxy = channel.objects.proxy;

        <!--now you can-->
    
        <!--get values-->
        let proxyValue = proxy.value;

        <!--connect signals-->
        proxy.valueChanged.connect(() => {
            ...
        });

    });
}

function someFunction(newValue) {

   <!--set values-->
   proxy.value = newValue; 

}
...

<body onload="loaded()">...</body>

一旦你初始化了一個網絡頻道並將“代理”對象分配給窗口對象，你就可以在 JavaScript 的任何地方自由地使用它。

如何使用 QT 與 html 元素交互

問題描述

1 個解決方案

解決方案1
0 已采納 2022-07-14 14:18:29

如何使用 QT 與 html 元素交互

問題描述

1 個解決方案

解決方案1 0 已采納 2022-07-14 14:18:29

解決方案1
0 已采納 2022-07-14 14:18:29