关于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("浏览器暂未加载...");
}

相关连接：

cefsharp 如何成功获取加载完毕后，网页的源代码-前端-CSDN问答

CefSharp内核浏览器之C#与js的互相调用_饮尽鸿爪下的雪泥的博客-CSDN博客

升级CefSharp解决RegisterJsObject方法弃用问题_黑石雨的博客-CSDN博客

CefSharpSettings.LegacyJavascriptBindingEnabled 没有该属性 - 简书 (jianshu.com)