winform 使用 CefSharp 嵌入 Chrome 内核

前言

我要绘制数十万级数据量的折线图,普通的 Chart 控件在数据量上去之后就开始卡顿,而且不够美观,功能又少。所以计划使用 echarts 。

winform 使用 webBrowser 控件分分钟嵌入一个浏览器,加载 echarts,相关资料很多,与 JS 交互也很方便。

但是 webBrowser 控件使用的是 windows 自带的 ie 浏览器,ie 浏览器有多菜?反正很菜,我已经被气哭了。

然后就开始摸索怎么把谷歌浏览器嵌到 winform 中。

相关操作网上有很多资料可以参考,写的比较清晰的有:

https://blog.csdn.net/u012950099/article/details/79751721

http://www.eskysky.com/1645.html

http://www.libs.org.cn/index.php?m=content&c=index&a=show&catid=90&id=129

这里只记录几个遇到的问题(坑):

坑 1(scripts can only be executed within a V8Context)

C# 调用 JS 时报错:

C# 端:

//运行页面上js的AddPoint方法
chromeBrowser.ExecuteScriptAsync("AddPoint()");
JS 端:

function AddPoint()
{
   Alert("CSharp to Js sucess!");
}

结果代码执行的时候弹出如下错误消息:

"Unable to execute javascript at this time, scripts can only be executed within a V8Context. 
Use the IWebBrowser.CanExecuteJavascriptInMainFrame property to guard against this exception. See https://github.com/cefsharp/CefSharp/wiki..."

这个错误你要是能在百度上搜索到相关解释算我输。

消息内容表示,当前 JS 只能在 V8Context 上执行。搜不到错误消息,就去搜了下 V8Context ,原来它是 Chrome 的 JS 引擎,但是我用的就是 Chrome 内核啊。

对此我怀疑过 cef 版本,换过版本也是这个错误。被这个异常卡了两个多小时,不停的检查、试验,忽然的一次成功让我眼前一亮,为什么这次调用成功了。

原来是 C# 与 JS 交互的太早了,Chrome 内核还没加载起来… 🙃 。

坑 2 (调用 JS 无反应)

这是 cef 留的另外一个大坑,不知道原因的话,这个地方卡一天都行。

原因很简单:JS 语法错误。

在使用 ie 浏览器的时候,页面的 JS 错误,会弹出来错误的位置,甚至有推断的可能的原因:

但是谷歌浏览器不会,有错误没弹窗,这是调了大半天的 ie 之后形成思维定势的我所料不能够的 🙃。

一直以为是调用出了错,或者参数传递,或者 function 错误。删繁就简。逐步减少不必要因素,结果发现是某个地方的 javascript 少了个逗号…

坑3(C# 传递数组到 JS)

这个不算坑吧,只是在百度上关于这个都是抄来抄去,还没有一个管用的,后来硬试出来的:

C#端
//声明数组
List<string> timeList = new List<string>();
//添加数据
timeList.Add("2020-05-04 00:00:00:0000");
timeList.Add("2020-05-04 00:00:00:0001");
timeList.Add("2020-05-04 00:00:00:0002");
//序列化成Json
string strTime = JsonConvert.SerializeObject(timeList);
//传递给页面脚本
chromeBrowser.ExecuteScriptAsync("ShowTime('" + strTime + "')");
JS端
function ShowImage(strT)
{	
     var arrT = JSON.parse(strT);
     data.length = 0;
     for(var i = 0; i< arrT.length; i++)
     {
          data.push(arrT[i]);
     }
     //Do something...
};

附录

一个 winform 使用 CefSharp 嵌入 Chrome 内核并与 JS 交互的代码样例:

https://download.csdn.net/download/u012408847/11983647

发表评论