关于CefSharp中C#与JS函数互相调用的应用

作者：咕魂

时间：2022年5月6日

大量博文可以看到一些C#与JS脚本相互调用的案例，但是不同版本的CefSharp使用时还是有一点不同，博主本次使用的CefSharp版本为100.0.230.0，查看方法按住Ctrl点击ChromiumWebBrowser可以看到程序集开头有写到版本号。

接下来是正文：

JS调用C#函数

// 使用ChromiumWebBrowser时进行的状态设置

// 其中chromiumWebBrowser为实例化的ChromiumWebBrowser对象，

// CefSharpSettings是直接设置静态类的属性，也能先创建对象，但是没必要

chromiumWebBrowser.JavascriptObjectRepository.Settings.LegacyBindingEnabled = true;

CefSharpSettings.WcfEnabled = true;

chromiumWebBrowser.JavascriptObjectRepository.Register("bound", new BoundObject(), isAsync: false, options: BindingOptions.DefaultBinder);

// BoundObject.class的写法

class BoundObject

{

  public string hello()

  {

    return "hello";

  }

}

注：旧版本使用

chromiumWebBrowser.RegisterJsObject("bound", new BoundObject(), options: BindingOptions.DefaultBinder);

并且博主使用时直接使用``CefSharpSettings.LegacyBindingEnabled会出现LegacyBindingEnabled`未定义的错误。

html中调用函数的代码：

<script>

  // 如果bound对象存在，则调用bound中的hello函数

  // 注意此处bound字段一定要和之前代码Register函数的第一个参数一致

  if(bound){

    console.log(bound.hello());

  }

</script>

不出意外，你能够在C#程序运行后，查看浏览器组件的控制台，可以看到hello的输出信息。

C#调用JS函数

// 其中chromiumWebBrowser为实例化的ChromiumWebBrowser对象

string javascript = "hello();";

chromiumWebBrowser.ExecuteScriptAsync(javascript);

html中的代码

<script>

    function hello(){

        console.log("hello")

    }

</script>

如果你是和我一样，在chromiumWebBrowser刚刚加载页面后就直接调用ExecuteScriptAsync()函数执行JS脚本，不出意外应该会报一个hello未定义的错误。

但是如果把调用ExecuteScriptAsync()的函数写在winform的按钮事件中，加载完页面之后，点击按钮再执行，就能够成功在浏览器组件的控制台看到输出的hello字样。

总结

按理来说，如果在页面刚刚加载就执行一段脚本从C#传数据过来，两种方法应该都是可行的，但C#调用JS函数时一定要等页面完整加载之后再调用，不然会出现函数未定义的情况，可以先查询一下页面加载的情况再执行，这里，我使用的是第一种（JS调用C#函数）方法，通过JS调用C#函数来传递数据。

之后如果html页面中的触发函数需要执行C#函数，就使用第一种（JS调用C#函数）方法，如果是winform组件的触发事件要执行JS函数，就使用第二章（C#调用JS函数）方法。

C#数据往JS部分传递两种方法都可以，但JS的数据往C#部分传递，则只能使用第一种（JS调用C#函数）方法。

提示

打开浏览器控制台的方法：

// 点击按钮button1打开控制台，也能写到其他chromiumWebBrowser初始化之后的地方

private void button1_Click(object sender, EventArgs e)

{

  if (chromiumWebBrowser != null)

  	chromiumWebBrowser.ShowDevTools();

  else

  	MessageBox.Show("浏览器暂未加载...");

}