Callback Delphi function from TWebBrowser by javascript on Delphi XE6 for all platforms (including iOS, ANDROID)?

Question

I need create an application on Delphi XE6 for Android and iOS. This application mest be use a TWebBrowser to show Google Maps, then I need "send" from Delphi to javascript and "receive" command from javascript to Delphi. In this way I can show a market on map and then know when the user click on marker. I have found this article on web to execute javascript by Delphi code.

But I don't have idea about how can call a delphi procedure from javascript. For example I have this procedure on Delphi:

procedure JSFeekback(aParm1, aParm2, aParm3, aParm4: string);

and I want use Javascript code on TWebBrowser to call it an pass 4 parameters. I have found similar questions but only for Windows application and the answers don't work on Android (I haven't tried on iOS).

Answer 1

The proper way to do it is with the addJavascriptInterface function of the Android WebView, as can be seen here, here and here.

The Firemonkey TWebBrowser does not expose this function by default.

There is a custom WebView wrapper control in DPF Android as can be seen here.

You could modify that control to add the addJavascriptInterface function.

For TWebBrowser on IOS you could use the custom web browser controls in sourceforge and here.

Another possible way to do this is with the OnShouldStartLoadWithRequest event of TWebBrowser. You could do something like:

<script language=”javascript” type=”text/javascript”>
window.location.href=”#param1&param2&param3&param4”;
</script>

or

<script language=”javascript”>
window.navigate(”javascript:thisisatest();”);
</script>

And see if the URL property of OnShouldStartLoadWithRequest contains #param1&param2&param3&param4 or javascript:thisisatest();.

Basically the idea is to navigate to a URL that doesn't change the URL of the existing page and pick up that URL in the OnShouldStartLoadWithRequest event.

Answer 2

With JavaScript it is very common to access HTTP servers, for example over jQuery. If you can make your Delphi code available over HTTP, either as a local serveror on the web, your JavaScript code can invoke Delphi code by sending a HTTP request, and receive data from Delphi functions as a HTTP response.

Another option are WebSockets. They are an extension of HTTP, work asynchronously so the Delphi server can send data to the script - without having to wait for a request first (known as server push / Comet).

This would be a standards-based, widely used solution, which does not rely on a particular web client. The free open source library Internet Direct (Indy) can be used on all supported platforms to create HTTP servers, stand-alone or integrated with your application.

Other protocols which are availabe for communication between JavaScript and servers might be also worth a look, for example STOMP.

For your specific function, the HTTP call could use a GET request with parameters:

http://localhost/JSFeekback?par1=val1&par2=val2&par3=val3&par4=val4