Qt Slot Call Order

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

Qt Slot Call Order

If the 'compute' slot does not take exactly one QString, one int and one double in the specified order, the call will fail. Warning: this method will not test the validity of the arguments: object must be an instance of the class of the QMetaObject of which this QMetaMethod has been constructed with. The arguments must have the same type as the. An overview of Qt’s signals and slots inter-object communication mechanism. Signals and slots are used for communication between objects. The signals and slots mechanism is a central feature of Qt and probably the part that differs most from the features provided by other frameworks. If I’m about to modify a slot function I might take an extra minute to look around since most IDEs can’t tell syntactically where it’s used in a SLOT macro. In this case you have to search for it textually.) Thanks to C11 lambdas and Qt’s ongoing evolution, these short slots can be replaced by a more succinct syntax. QuikTrip, one of the nation’s premier convenience and gasoline marketers, announces the launch of its new Carryout X-Large Pizza – a fresh, made-to-order pizza featuring the same quality ingredients as the by the slice pizza QuikTrip fans have grown to love.

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 .

Qt Signal Slot Call Order

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”.

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.

Qt Slot Call Ordering

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

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: Casino avenue charles de gaulle paul green.

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

Qt Slot Call Orders

If you like my content, please consider buying me a coffee. Thank you for your support!