As Qt WebKit is replaced by Qt WebEngine(you can refer to this post about porting issues), accessing html elements from C++ directly becomes impossible. Many works originally done by QWebKit classes are now transferred to javascript. Javascript is used to manipulate web content. And you need to call runJavaScript from C++ code to run javascript on the web page loaded by QWebEngineView.To get web elements, a communication mechanism is invented to bridge the C++ world and the javascript world. The bridging mechanism is more than obtaining the values of web page elements. It provides the ways in which C++ code can call javascript functions, and javascript can invoke C++ functions as well.The values of variables can also be passed from C++ to javascript, and vice versa. Let’s consider the following application scenarios:

javascript code calls C++ function

Traditional syntax: SIGNAL and SLOT QtCore.SIGNAL and QtCore.SLOT macros allow Python to interface with Qt signal and slot delivery mechanisms. This is the old way of using signals and slots. The example below uses the well known clicked signal from a QPushButton. The connect method has a non python-friendly syntax. The intermediate functions can be as simple or as complicated as you like - as well as discarding/adding parameters, you can also perform lookups to modify signals to different values. In the following example a checkbox signal Qt.Checked or Qt.Unchecked is modified by an intermediate slot into a bool value. Sending Python values with signals and slots. On the #pyqt channel on Freenode, Khertan asked about sending Python values via Qt's signals and slots mechanism. The following example uses the PyQtPyObject value declaration with an old-style signal-slot connection, and again when the signal is emitted, to communicate a Python dictionary. After the sections are resized from 105 (which I assume is their default value) to 210 and 196, signal sectionResized is emitted twice, once for section 0 and once for section 1. You can see that in the first call of the slot connected to that signal, sectionSize(0) and sectionPosition(1) return wrong values.

C++ code should provide a class which contains the to-be-called function(as a slot), then register an object of this class to a QWebChannel object, and set the web channel object to the web page object in the QWebEngineView

To invoke the C++ function jscallme, javascript should new an instance of QWebChannel object.

QWebChannel is defined in qwebchannel.js(you can find this file in the example folder of Qt installation directory) so the script should be loaded first. In the function passed as the second parameter of function QWebChannel, the exposed object from C++ world(webobj in C++) channel.objects.webobj is assigned to the javascript variable webobj, and then assigned to window.foo so you can use foo elsewhere to refer to the object. After the function is executed, javascript can call the C++ slot function jscallme as follows:

Pass data from javascript to C++

We’ve known how to call C++ function from javascript. You should be able to figure out a way to pass data from javascript to C++, i.e., as parameter(s) of function. We re-implement jscallme as follows:

, and invoking of the function from js would be:

Note that the “const” before the parameter can not be omitted, otherwise, you will get the following error:
Could not convert argument QJsonValue(string, “sd”) to target type .

Although data can be passed as parameters of function, it would be more convenient if we can pass data by setting an attribute of an object like:

We expect after the code is executed, “somedata” will be stored in a member variable of the exposed object (webobj) in C++. This is done by delaring a qt property in C++ class:

Now if you execute foo.someattribute=”somedata” in javascript, m_someattribute in C++ will be “somedata”.

Can Qt Slot Return Value Kelley Blue Book

Pass data from C++ to javascript

We can send data from C++ to javascript using signals. We emit a signal with the data to send as the parameter of the signal. Javascript must connect the signal to a function to receive the data.

The line “webobj.someattributeChanged.connect(updateattribute)” connects the C++ signal someattributeChanged to the javascript function updateattribute. Note that although updateattribute takes one parameter “text”, we did not provide the parameter value in connect. In fact, we do not know the parameter value passed to updateattribute until the signal is received. The signal is accompanied by a parameter “attr” which is passed as the “text” parameter of updateattribute. Now, if you call webobj->setsomeattribute(“hello”), you will see the value of the html element with id “#attrid” is set to “hello”. Note that although we connect the member m_someattribute to the qt property someattribute in the above example, it is not a required step. The signal mechanism alone can realize the delivery of data.
We can make things even simpler by adding the NOTIFY parameter when declaring the someattribute property.

Now, if you call webobj->setProperty(“someattribute”,”hello”) somewhere in C++, the signal “someattributeChanged” is automatically emitted and our web page gets updated.

Can Qt Slot Return Value Guide

C++ invokes javascript function

This is much straightforward compared with invoking C++ function from js. Just use runJavaScript passing the function as the parameter as follows:

It assumes the jsfun is already defined on your web page, otherwise, you have to define it in the string parameter. The return value is asynchronously passed to the lambda expression as the parameter v.

Now, back to the question raised at the beginning of the post: How to get the value of an html element in C++? It can be done as follows:

It uses jQuery functions so make sure jQuery lib is running on your web page.