Table of Contents
Table of Contents
Using JavaScript Extension

A JavaScript "extension" is a gateway for you to call custom .NET code from your JavaScript code. EO.WebBrowser provides several ways for you to call .NET code from JavaScript.

Using eoapi.extInvoke

Using WebView.RegisterJSExtensionFunction

Using WebView.ObjectForScripting

Using eoapi.extInvoke

Inside your JavaScript code, you can call eoapi.extInvoke to invoke an "extension". For example:

JavaScript
Copy 
//Invoke JavaScript "extension" "demoAbout" with a single argument
eoapi.extInvoke("demoAbout", [window.navigator.appVersion]);

The above JavaScript code calls extension "demoAbout" and pass a single argument which is window.navigator.appVersion. The second argument of extInvoke is an array, so it is possible to pass multiple values. For example:

JavaScript
Copy 
//Invoke JavaScript "extension" "demoAbout" with a two arguments
eoapi.extInvoke("demoAbout", [window.navigator.appVersion, document.URL]);

The above code triggers the WebView's JSExtInvoke event. Inside the event, you can check the "function name" and "function argument" through the event arguments. The following code simply displays a message box for "demoAbout":

Copy 
//Attach the event handler
webView1.JSExtInvoke += new JSExtInvokeHandler(WebView_JSExtInvoke);

//Event handler code
void WebView_JSExtInvoke(object sender, JSExtInvokeArgs e)
{
    switch (e.FunctionName)
    {
        case "demoAbout":
            string browserEngine = e.Arguments[0] as string;
            string url = e.Arguments[1] as string;
            MessageBox.Show("Browser Engine: " + browserEngine + ", Url:" + url);
            break;
    }
}

The above code uses eoapi.extInvoke in the JavaScript to trigger the "extension".

Using WebView.RegisterJSExtensionFunction

You can simply the above code by calling WebView.RegisterJSExtensionFunction to register the extension directly as a JavaScript function. For example:

Copy 
//Register extension function "demoAbout"
webView1.RegisterJSExtensionFunction("demoAbout", new JSExtInvokeHandler(WebView_JSDemoAbout))

//Extension handler function
void WebView_JSDemoAbout(object sender, JSExtInvokeArgs e)
{
    string browserEngine = e.Arguments[0] as string;
    string url = e.Arguments[1] as string;
    MessageBox.Show("Browser Engine: " + browserEngine + ", Url:" + url);
}

Once the extension function is registered, you can call the function in your JavaScript code directly:

JavaScript
Copy 
//This code will call WebView_JSDemoAbout 
demoAbout(window.navigator.appVersion, document.URL);

Note that:

  • You can call the method name directly, no need to call it through eoapi.extInvoke;
  • You would pass the argument list directly instead of placing them into an array;

Once a function is registered with RegisterJSExtensionFunction, calling that function through eoapi.extInvoke will no longer raise JSExtInvoke event. Instead it will call the handler provided by RegisterJSExtensionFunction. This means regardless calling the function directly through function name or through eoapi.extInvoke, it will always reach the handler provided by RegisterJSExtensionFunction.

Using WebView.ObjectForScripting

You can also set WebView.ObjectForScripting to a .NET object to make all public methods on that object to be accessible using window.external object from JavaScript. The following code demonstrates how to use this feature:

Copy 
//Demo object for WebView.ObjectForScripting property. This object exposes three
//methods that can be called from JavaScript
private class ObjectForScriptingDemo
{
    public void Hello(string s)
    {
        MessageBox.Show("Hello From Script:" + s);
    }

    public DateTime GetTime()
    {
        return DateTime.Now;
    }

    public void HandleMouseClick(int x, int y)
    {
        string s = string.Format("Click From JavaScript, x = {0}, y = {1}", x, y);
        MessageBox.Show(s);
    }
}

//Set the WebView's ObjectForScripting method
webView.ObjectForScripting = new ObjectForScriptingDemo();

After the above code, you can call any of ObjectForScriptingDemo's methods through window.external in JavaScript. For example, the following JavaScript code calls Hello method:

JavaScript
Copy 
//Call .NET side ObjectForScriptingDemo.Hello method
window.external.Hello("Hello from JavaScript!");