Tutorial #74: Calling function from Javascript using QtWebkit bridge

Hello everyone!

Developers often need to develop hybrid client applications that distinguish themselves from a thin client by performing heavy calculations on the client side in C++, like a native application. It presents nothing more than a QWebView for its user interface, displaying web content written in HTML/JavaScript.

In order to implement such applications Qt provides the QtWebkit-bridge that in a way extend WebKit’s JavaScript environment to access native objects represented as QObjects. Through this tutorial, we will learn how to call a native Qt function from Javascript using the webkit bridge.

Pre-requisites: Qt Creator, MinGW compiler (Windows – 64 bit)

Step 1: Launch Qt Creator and create a new Qt console application project called TestHttpScriptExample. Choose the default Desktop kit.

Step 2: Create HTML file

First, we need to create an HTML file that will contain the Javascript code required to call our native Qt function.

test.html

<html>
<body>
<script type="text/javascript">

myoperations.display();


function displayMessage(){
    alert("Hello display");
    return "Done!";
}

myoperations.submit();

function test(){
    return "Called me!";
}
</script>

<p>Test Example to call Qt function from Javascript </p>

<input type="button" value="Click me!" onclick="displayMessage()">

</body>
</html>

Next we need to add the HTML file to our Qt project. Right click your Project –> Add Existing files and navigate to the directory where you have created the HTML file.

Step 3: Add Qt code

Let’s add the code to the main.cpp as follows. To make a method invokable, simply add the Q_INVOKABLE macro before its definition.

main.cpp

#include <QCoreApplication>
#include <QDebug>
#include <QApplication>
#include <QtWebKitWidgets/QWebFrame>
#include <QtWebKitWidgets/QWebPage>
#include <QtWebKitWidgets/QWebView>
#include <QNetworkAccessManager>
#include <QNetworkRequest>
#include <QNetworkReply>
#include <QUrl>
#include <QUrlQuery>
#include <QWebSettings>
#include <QVariant>

QWebView *view;
class MyJavaScriptOperations : public QObject {
    Q_OBJECT
public:
    MyJavaScriptOperations(){

        qDebug() << "In constructor";
    }

public slots:
    Q_INVOKABLE
    void submit()
    {
        QVariant f1result = view->page()->mainFrame()->evaluateJavaScript("test()");
        qDebug() << f1result.toString();
    }

    Q_INVOKABLE void display(){

        qDebug() << "In display method";

    }

};

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    view = new QWebView();
    view->resize(400, 500);
    view->page()->mainFrame()->addToJavaScriptWindowObject("myoperations", new MyJavaScriptOperations);
    view->load(QUrl("file:///F:/programs/test.html"));
    view->show();
    return a.exec();

}

#include "main.moc"

.pro file

QT       += core

QT       -= gui
QT       += webkit webkitwidgets
TARGET = TestHttpScriptExample
CONFIG   += console
CONFIG   -= app_bundle

TEMPLATE = app

SOURCES += main.cpp

OTHER_FILES += \
    ../../test.html

Save all changes. Build and run the application. If no errors occur then you should see the following output!

output_1

output_2

Reference: Qt documentation