前言
我要绘制数十万级数据量的折线图,普通的 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 交互的代码样例: