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.


<script type="text/javascript">


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


function test(){
    return "Called me!";

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

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


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.


#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 {

        qDebug() << "In constructor";

public slots:
    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);
    return a.exec();


#include "main.moc"

.pro file

QT       += core

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


SOURCES += main.cpp


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



Reference: Qt documentation

Karan Balkar About Karan Balkar
self proclaimed extraterrestrial fandroid, computer engineer, amateur gamer and die hard punk rock fan!

One thought on “Tutorial #74: Calling function from Javascript using QtWebkit bridge

Leave a Reply

Your email address will not be published. Required fields are marked *