Cefsharp入坑实操

最近做一个项目练手，需要多人配合，前端有js网页制作和美工人员，我只写过c#后台编程，没做过wpf界面，于是想采用嵌入式的网页开发本地程序，就入了cefsharp这个坑。目前遇到的问题一一得到解决。

1、c#暴露接口给js

   CefSharpSettings.LegacyJavascriptBindingEnabled = true;
            ChromiumWebBrowser wb = new ChromiumWebBrowser
            {
               // Address = @"D:\RRR\html\html\menu.html"
                Address = "http://www.baidu.com"

            };
            //BindingOptions bo = new BindingOptions();
            //bo.CamelCaseJavascriptNames = false; 
            wb.RegisterJsObject("bound", new BLL.BoundObject());
            MainGrid.Children.Add(wb);

2.c#实现功能，并调用页面js函数

 1    /// <summary>
 2         /// 云服务器是否连接
 3         /// </summary>
 4         public void cloudservice(IJavascriptCallback javascriptCallback)
 5         {
 6             const int taskDelay = 3000;
 7 
 8             string url = System.Configuration.ConfigurationManager.AppSettings["ConnectionIP"];
 9             string url2 = System.Configuration.ConfigurationManager.AppSettings["ConnectionString"];
10             string[] urls = { url , url2};
11            
12             bool status = false;
13             try
14             {
15                 status = BLL.CheckNetState.CheckServeStatus(urls);               
16             }
17             catch (Exception ex)
18             {                
19             }
20             Task.Run(async () =>
21             {
22                 await Task.Delay(taskDelay);
23 
24                 await javascriptCallback.ExecuteAsync(status);
25             });
26           
27         }

3.页面js函数测试代码

 <script type="text/javascript">
        function callback(cloudservice) {
          //  var result = document.getElementById('cbresult');
         //   result.innerText += "Callback: " + cloudservice + "" + Date();
            var online = "../../image/1.png";
            var local = "../../image/1-1.png";
           // var cloudservice = true;
            if (cloudservice == true) {
                document.getElementById("imageId").src = online;
            } else {
                document.getElementById("imageId").src = local;
            }
        }

        function testCallback() {
            bound.cloudservice(callback);
          //  var result = document.getElementById('cbresult');
        //   result.innerText = "The function has returned: " + Date() + "\n";
        }
    </script> 
<button οnclick="testCallback()">Test Callback</button>

上面三步实现了后台和js的通讯接口，目前就是对于数据传输过程的延迟没有深入测试，看是否能满足应用要求。

转载于:https://www.cnblogs.com/talentsnail/p/9627934.html