Calling C++ from JavaScript / HTML using GTK+ Webkit Webview (and Qt WebKit bridge)

Question

I am currently evaluating different approaches / solutions to call C++ functions from JavaScript code embedded in an HTML page. The application must be run on Ubuntu Server 12.04 LTS.

I am not an expert in Linux based development. This is the first time I am trying to work on something to interface between JavaScript and C++ code.

The C++ code basically resides in the .so files ( dynamic libraries) that would provide interface methods to access certain hardware and file system. The GUI needs to be in HTML and I am searching for different solutions that are possible that can call C++ from HTML. I searched and ended up deciding to try 2 approaches, both using the WebKit engine.

Approach 1: Using Qt 5.0.2 Webkit Bridge - the WebView control
The GUI framework will be on Qt framework, the main application window will contain a webview control that would run an HTML code which in turn contains the JavaScript code.
The interface between Web page and C++ is done using the addToJavaScriptWindowObject() function.

I created a sample application and tested this solution and it seems to works fine.

Approach 2: Using GTK+ WebKit WebView
I downloaded and installed the GTK 3.0 library.
I got the webkitgtk 2.0.1 and have installed it.
I have created a test application with GTK without webkit, it works well.
I am trying to create a webkit webview control using GTK.

When trying my Approach 1 with Qt, there was quite a good set of documentation and samples to do what I wanted to. But after starting with Approach 2 using GTK+, I feel am moving slower comparitively. I personally feel that the documentation part is not that straight forward for the kind of application I am trying to develop.

Other Approaches:
I also want to try to check if either using Applets (to call the .so files directly) or using the V8 JavaScript engine to interface between JavaScript and C++ are viable options(https://code.google.com/p/v8/)

I have tried the following resources:
http://webkitgtk.org/
http://www.webkit.org/
https://live.gnome.org/WebKitGtk/ProgrammingGuide/Tutorial

I want to know how exactly to do this interface part of calling a C++ functions (in .so files) when a button is clicked in a HTML web page containing JavaScript. What kind of signal am I supposed to look for. If I am using a WebkitWebview control, how do I map a button click to a c++ function?

Can someone point me to the right direction?

I would really appreciate your time and knowledge.

Regards.

if you are using chrome, you can use Native Client stackoverflow.com/questions/1666957/… — camino

user871199 user871199 · Accepted Answer · 2013-05-14T17:59:49

Webkit GTK 2 changed significantly in terms of API's. So I am not sure if this will work with Webkit GTK 2. However this will definitely work in Webkit GTK 1.* versions. Don't know anything about QT.

For your need of connecting html view with C/C++ side of the world, you can use two approaches. Please take a look at function webkit_dom_event_target_add_event_listener. There is example at https://live.gnome.org/WebKitGtk/ProgrammingGuide/Cookbook

Another approach you can take is to use alert on click of the button and send a string as information. On C side, you can hookup the alert listener and parse the message and decide what needs to be done. I have written lot of code in python which takes this approach since call mentioned above is not exposed to python.

I agree documentation is bit sparse for webkit gtk. However if you know how you can acomplish something in javascript, usually you can map the javascript DOM management and event calls to C side. This includes generating elements dynamically, managing events such onclick etc. You just have to dig through the header files and find matching call.

Calling C++ from JavaScript / HTML using GTK+ Webkit Webview (and Qt WebKit bridge)

3 Answers