HTMLViewer JavaScript communication for Xojo

The MBS Xojo Plugins provide various functions for HTMLViewer to use JavaScript in Xojo applications. Here a few details on the various ways to run JavaScript in the HTMLViewer in Xojo.

So we have WebViewMBS class (WebKit 1.x), WKWebViewControlMBS control (WebKit 2.x), Internet Explorer methods on HTMLViewer, ChromiumBrowserMBS class for Chromium Embedded Framework and LinuxWebViewMBS class for WebKit on Linux.

MacOS WebKit 1.x

First we have our extensions to HTMLViewer class. As we started with MacOS support first many years ago, those are the oldest functions for HTMLViewer.

HTMLViewer.EvaluateJavaScriptMBS(code as string) as string

This is a convenient function for MacOS to evaluate some JavaScript and return the result synchronously. It’s perfect to call JavaScript functions or to run a piece of JavaScript.

Alternatively you can get WebViewMBS object for the HTMLViewer and than call EvaluateJavaScript there directly.

MacOS WebKit 2.x

Xojo doesn’t use WebKit 2, but you can use our WKWebViewControlMBS control from the plugins. If you put the WKWebViewControlMBS control on the window and for 32-bit, it will use the WebKit 1.x WebView class, while in a 64-bit application will use the newer WKWebView class. So only for 64-bit you benefit from newer JavaScript engine, running website in its own process and better security. On the other side WebKit 2 doesn’t do printing well and all the controlling on the web viewer has to go from one process to the helper process running it.

We have a function there to evaluate JavaScript, which runs asynchronously:

EvaluateJavaScript(JavaScript as String, Tag as String = “”)

So when it finishes, this calls JavaScriptEvaluated event and passes the result as variant. We translate data types from JavaScript for you, so passing a number back will give you a number wrapped in the variant. We could implement a synchronous version, too.

Windows with Internet Explorer

For Windows the HTMLViewer can run in two modes. First you can run it with Internet Explorer (native renderer) or with WebKit mode. You switch this by the Renderer property.

When using Internet Explorer, we can run JavaScript with

HTMLViewer.IERunJavaScriptMBS(JavaScript as string) as boolean

method. This will perform the JavaScript and return just whether it worked or not. Sadly IE doesn’t provide the result of the JavaScript back to us. To work around this, we first used the window title. As this is not used by Xojo, we just assigned the window title in JavaScript and read it back in Xojo with our IETitleMBS property. If you can have a hidden textarea form control on the website, you can use our

IEGetTextAreaMBS(FormName as String, FieldName as String) as String
IESetTextAreaMBS(FormName as String, FieldName as String, Value as String) as Boolean

To transfer large text blocks between JavaScript and Xojo. As you can create the field with a JavaScript, you can first run IERunJavaScriptMBS to create it, than fill the field and call JavaScript with IERunJavaScriptMBS to use it and put the result back into the text area.

Windows with WebKit

For using WebKit in Xojo, we have the ChromiumBrowserMBS class. The HTMLViewer.ChromiumBrowserMBS function returns you such an object for a given HTMLViewer. As Xojo already uses the third version of Chromium Embedded Framework (CEF), be sure to use recent plugins which support all three versions. For Chromium browser object, we got a method to run JavaScript:

ExecuteJavaScript(jsCode as string, scriptUrl as string = “”, startLine as Integer = 0)

This will run javascript functions. Sadly the execution is asynchronously and we don’t get back the result. But on a frame, we can use methods in ChromiumFrameMBS class to get the text or source code of the page, so if the result is put in the DOM, you may see it there.

Linux with WebKit

For Linux, the MBS Xojo Plugins supports using WebKit for the HTMLViewer and has various extensions in the LinuxWebViewMBS class. We got two methods there to run JavaScript:

method EvaluateScript(script as string) as string
method ExecuteScript(script as string)

If you need more options, you can use the methods of LinuxJavaScriptContextMBS class instead. There we have more JavaScript functions:

method EvaluateScript(script as string, sourceURL as string = “”, StartLineNumber as Integer = 0) as string
method EvaluateScript(script as string, sourceURL as string, StartLineNumber as Integer, byref JSException as string) as string

The methods runs a piece of JavaScript and return the result. If an exception happens, the JSException string is filled to provide details.

Web Projects

For web projects, you don’t need a plugin as there is an ExecuteJavaScript function in the Xojo framework built-in.

iOS Projects

For iOS, we have no plugins. But you can use a declare to evaluateJavaScript function on the HTMLViewer control.

Still up to date :slight_smile:

Thanks a lot for the documentation!!!

I still use electron with ES6/ES2015 and Xojo as backend (at the client -> 2tier…).
If I could use Xojo with embedded browser (including F12 developer tools!), that would be great!

At the moment, I have to use websocket with base64 encoding and great Aloe Express.
But all is a workaround here and there mess…

I need to use JS/HTML/CSS at client side, because no other ui framework including Xojo’s doesn’t work completely.

We recently added Evaluate for IEDocumentMBS class which allows you to run JavaScript and get back result.
And CallFunction method allows to call JavaScript functions directly.

[quote=451757:@Hans-Norbert Gratzal]Thanks a lot for the documentation!!!

I still use electron with ES6/ES2015 and Xojo as backend (at the client -> 2tier…).
If I could use Xojo with embedded browser (including F12 developer tools!), that would be great!

At the moment, I have to use websocket with base64 encoding and great Aloe Express.
But all is a workaround here and there mess…

I need to use JS/HTML/CSS at client side, because no other ui framework including Xojo’s doesn’t work completely.[/quote]

The are no debugging tools (F12) in HTMLViewer.

When using our WebKit 2 control on macOS you can use the developer tools.

A synchronous version of JavaScriptEvaluated in WKWebViewControlMBS would be very welcome. I’ve implemented my own variant that loops until a flag is set, but it’s a kludge and can break in edge cases.

We got that last year already for 20.0:

EvaluateJavaScript(JavaScript as String, byref Error as NSErrorMBS) as Variant

in addition to the async version:

EvaluateJavaScript(JavaScript as String, Tag as String = "")

see documentation here: WKWebViewControlMBS

I installed the most recent 20.0 prerelease and tried to do a synchronous call:

dim theNSError as NSErrorMBS
dim v as variant = theWebView.EvaluateJavaScript(“document.body.innerHTML”, theNSError)

theNSError is nil, but so is v.

If I use the asynchronous method the contents of the web page are returned correctly.

Am I using the synchronous method incorrectly?

Sorry, 32-bit implementation was missing.
The 20.0pr6 works only in 64-bit for this call. I’ll fix for next release.
Thanks for reporting.

I’m running 64-bit, though.

I’m still looking into it, but the missing 32-bit part was obvious.

Found a typo in my C code. In Xojo that could not happen!

I put you a new plugin here: Dropbox

Bingo, it works. Thank you.