页首 HTML 代码 ----

关于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)

posted @ 2022-05-06 15:50  敲可耐的咕魂君  阅读(3491)  评论(1编辑  收藏  举报
页脚 HTML 代码 ----