Call .Net from javascript in CefSharp 1 - wpf

Question

I'm just learning C# WPF and has been successfully implemented CefSharp, how to call .NET function from javascript, that is loaded in CefSharp?

Marroquin

Answer 1

1. Construct WebView via WebView webView = new WebView(url)
2. Then you can invoke RegisterJsObject method to register a js object.
3. Use javascript to invoke this js object.

The example as below:

public class CallbackObjectForJs{
    public void showMessage(string msg){//Read Note
        MessageBox.Show(msg);
    }
}

WebView webView = new WebView("http://localhost:8080");
webView.RegisterJsObject("callbackObj", new CallbackObjectForJs());

javascript code at frontend:

<script type="text/javascript">
    callbackObj.showMessage('message from js');
</script >

Note: The first character can't be upper of showMessage method at CallbackObjectForJs

Booster

Not implemented Exception occurred in CefSharp 33.0.0. Anyone know of when this might be implemented. The next version? – Kimsey

@Kimsey it looks like it has been moved to Cef.RegisterJsObject now – Dissert

Answer 2

Due to Chromium changes starting with 63.0.0 there are major changes Javascript Binding. The legacy behavior still works for Single Page Applications and where only a single domain is used.

New Binding Method

The new binding method has many advantages:

• Bind and unbind objects by name
• Bind a subset of objects to different pages (including popups)
• Delete/unbind a method
• Resolve a bound object dynamically

Simple example:

public class BoundObject {
    public void showMessage(string msg) {
        MessageBox.Show(msg);
    }
}

browser.JavascriptObjectRepository.Register("boundAsync", new BoundObject(), true);

---

<script type="text/javascript">
    (async function() {
        await CefSharp.BindObjectAsync("boundAsync", "bound");

        boundAsync.showMessage('Message from JS');
    })();
</script>

For more details visit Javascript Binding v2 #2246 and How do you expose a .NET class to JavaScript?

Legacy Binding

If you perform cross-site navigation's you will no longer be able to use this method to bind objects.

You need to set CefSharpSettings.LegacyJavascriptBindingEnabled = true before you register your first object (RegisterAsyncJsObject).

Simple example:

public class BoundObject {
    public void showMessage(string msg) {
        MessageBox.Show(msg);
    }
}

CefSharpSettings.LegacyJavascriptBindingEnabled = true;
browser.RegisterAsyncJsObject("boundAsync", new BoundAsyncObject());

---

<script type="text/javascript">
    boundAsync.showMessage('Message from JS');
</script>

For more details visit Javascript Binding v2 #2246 and How do you expose a .NET class to JavaScript?

Pomeranian

Awesome answer for "New Binding Method" part. Simple, crystal clear and works like charm :) – Extern

Answer 3

First create a public class in C# like below :

public class cShaarp_Js
{
public void calledFromJs(Object object){}
}

And then you should register this class to your chromeBrowser.

chromeBrowser = new ChromiumWebBrowser("file:///C:/sample.html");
chromeBrowser.RegisterJsObject("csharp", new cShaarp_Js);

Now we are done with C#. on the other side at javascript you can create a callback to this class as done in below:

function cSharpMetodCall(){csharp.calledFromJs(object);}

Yul