How can I interact with html elements use QT

Question

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

If you take your question title (*How can I interact with html elements use QT*) and copy-paste it verbatim into your favorite search engine, what kind of results do you get then? Are they helpful? Perhaps they could help you to at least try something yourself? — Some programmer dude, Jul 11 '22 at 10:32
Also please take some time to read [the help pages](http://stackoverflow.com/help), take the SO [tour], read [ask], as well as [this question checklist](https://codeblog.jonskeet.uk/2012/11/24/stack-overflow-question-checklist/). — Some programmer dude, Jul 11 '22 at 10:33
Qt has a Good Document [Integrating Web Content](https://doc.qt.io/qt-5/topics-web-content.html) and **examples**. — Parisa.H.R, Jul 11 '22 at 12:41

score 0 · Accepted Answer · answered Jul 14 '22 at 14:18

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.

How can I interact with html elements use QT

1 Answers1