Can I call application methods from JavaScript in Awesomium?

Question

I've scoured the internet looking for an answer, but I must be asking the wrong question. I have a C# winforms app with an Awesomium web control. Am I able to call methods defined in the app from javascript in the page that loads? If so, how? (sample js code would be greatly appreciated). Thanks!

Answer 1

The approach depends on which version of Awesomium you're using. There's been a bit of a change of how this is done in the upcoming version 1.7 (currently at 1.7 RC3) and how it was done before. Note that there's one improvement in 1.7, in that .NET methods can now return values when JS calls a method on your app. I don't believe this was possible prior to 1.7.

Here are the two methods:

test.html (used for both versions)

...
<script type="text/javascript">

    function myMethod() {
        document.write("In myMethod, calling .NET but expecting no return value.<br/>");

        jsobject.callNETNoReturn();
    }

    function myMethodExpectingReturn() {
        document.write("In myMethodExpectingReturn, calling .NET and expecting return value.<br/>");

        var returnVal2 = jsobject.callNETWithReturn("foo");
        document.write("Got value from .NET: " + returnVal2 + "<br/>");
    }

    function myMethodProvidingReturn(whatToReturn) {
        var returnVal =  whatToReturn + "bar";
        document.write("Returning '" + returnVal + "' to .NET.");

        return returnVal;
    }
</script>
...

Version 1.7

Form1.cs

public Form1()
{
    InitializeComponent();

    //webView is an instance of WebControl defined in your form
    webView.DocumentReady += WebViewOnDocumentReady;

    webView.Source = new Uri("test.html");
}

private void WebViewOnDocumentReady(object sender, UrlEventArgs urlEventArgs)
{
    webView.DocumentReady -= WebViewOnDocumentReady;

    JSObject jsobject = webView.CreateGlobalJavascriptObject("jsobject");

    jsobject.Bind("callNETNoReturn", false, JSHandler);
    jsobject.Bind("callNETWithReturn", true, JSHandler);

    webView.ExecuteJavascript("myMethod()");
    webView.ExecuteJavascript("myMethodExpectingReturn()");
    var result = webView.ExecuteJavascriptWithResult("myMethodProvidingReturn('foo')");
    Console.WriteLine(result.ToString());
}

private void JSHandler(object sender, JavascriptMethodEventArgs args)
{
    if (args.MustReturnValue)
    {
        Console.WriteLine("Got method call with return request");
        args.Result = "Returning " + args.Arguments[0];
    }
    else
    {
        Console.WriteLine("Got method call with no return request");
    }
}

Version 1.6

Form.cs

public Form1()
{
    InitializeComponent();

    //webView is an instance of WebControl defined in your form
    webView.DomReady += WebViewOnDomReady;

    webView.Source = new Uri("test.html");
}

private void WebViewOnDomReady(object sender, EventArgs eventArgs)
{
    webView.DomReady -= WebViewOnDomReady;

    webView.CreateObject("jsobject");
    webView.SetObjectCallback("jsobject", "callNETNoReturn", JSHandler);

    webView.ExecuteJavascript("myMethod()");

    var result = webView.ExecuteJavascriptWithResult("myMethodProvidingReturn('foo')");
    Console.WriteLine(result.ToString());
}

private void JSHandler(object sender, JSCallbackEventArgs args)
{
    Console.WriteLine("Got method call with no return request");
}

Answer 2

In C++: (the .NET bindings will likely be similar)

Define a callback class:

class TestListener : public Awesomium::WebViewListener {
public:
    virtual void onCallback(
        Awesomium::WebView* caller,
        const std::wstring& objectName,
        const std::wstring& callbackName,
        const Awesomium::JSArguments& args
    ) {
        if (objectName == L"myApi" && callbackName == L"doMagicFoo") {
            cout << "callback called with " << args.size() << " args\n";
        }
    }

    //...implement all the other pure virtual functions...  
};

Then as you set up your WebView:

TestListener bob;
webView->setListener(&bob);
webView->createObject(L"myApi");
webView->setObjectCallback(L"myApi", L"doMagicFoo");

Then in your HTML/JS:

<button onclick="myApi.doMagicFoo('super', 45)">do native call</button>