[SOLVED] How can I interact with html elements use QT

How can I interact with html elements use QT

For example, I have a simple HTML page with button and label (or something else). How can I change the text in label (or something else) and catch the button click use QT. I try to use QWebEngineView to show html, but I don`t know how to interact with elements from QT modul, just change the url, but I dont think its a better way

Solution

To be able to interact with HTML rendered with QWebEngine you need to use QWebChannel. You can find the basic guidelines at Qt WebChannel JavaScript API page.

To implement intercommunication with JavaScript in your HTML page you need:

Add Qt += webchannel in your project file
Implement a QObject derived class that should be a proxy between C++ and JavaScript. The simpliest way to make it usable in JavaScript is to create getters, setters and signals for the values you intend to use in JavaScript, and expose them as Q_PROPERTY. Example:

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);

};

Set HTML to QWebEngineView with QWebEngineView::setHtml, instantiate your "proxy" class and create QWebChannel for the page (note that you can register multiple objects in QWebChannel). Example:

//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);

Embed qwebchannel.js file in HTML. File is located at <Qt installation directory>/Examples/Qt-<version>/webchannel/shared directory. You can include it in application resources and embed in HTML with <script type="text/javascript" src="qrc:/qwebchannel.js"></script>
Create onload event handler in HTML and initialize QWebChannel in it. Example:

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>

Once you initialized a web channel and assigned "proxy" object to the window object, you are free to use it everywhere in JavaScript.