• GET到新技能,SharpCEF,C#和JS的互相调用


    winform程序内嵌谷歌浏览器,使用大名鼎鼎的“SharpCEF”。这里科普一下:

    CEF是什么

    CEF是Chromium Embedded Framework的缩写,是个基于Google Chromium项目的开源Web browser控件,支持Windows, Linux, Max平台。除了提供C/C++接口外,也有其他语言的移植版。

    因为基于Chromium,所以CEF支持Webkit & Chrome中实现的HTML5的特性,并且在性能上面,也比较接近Chrome。

    CEF还提供的如下特性:自定义插件、自定义协议、自定义JavaScript对象和扩展;可控制的resource loading, navigation, context menus等等。

    谁在用CEF

    让我们通过一些实战中的例子,来说明大家都使用CEF做了什么:

    • 各种浏览器

      早期的双核浏览器(IE + Webkit),有些使用了CEF来作为Webkit内核浏览器控件。

      不过对于浏览器来说,直接在Chrome上面扩展,其实才是王道,大家现在都这么做了(各种极速浏览器)。

    • Evernote Client (on Windows)

      Evernote允许用户将网页粘贴到笔记中,还提供了插件用来将网页保存为笔记。

      那肯定是需要在Client上面可以正确的渲染页面咯,这个任务就交给了CEF。

    • GitHub Client (on Windows)

      GitHub也打包了libcef.dll,从表现上面看,用来展示项目的ReadMe页面的,肯定是CEF,其他地方的UI,可能部分也是用页面来实现的。

    • QQ

      QQ很早之前就通过内嵌IE来实现一些功能和界面。从去年开始,QQ引入了CEF,对一些之前用IE的地方进行了替换,这样就可以使用一些基于Webkit的新特性,同时也获得了速度、稳定性、兼容性方面的优势。

    • Adobe Edge Animate & Adobe Edge Reflow

      Adobe推出了一整套制作现代网页(或者说HTML5?)的工具,取名Edge

      • Adobe Edge Animate,做动画用的,可以通过编辑时间线,创建原件(Edge Animate里面叫做symbol),来实现复杂的动画。

      • Edge Reflow则是Design the responsive web. 有人翻译为响应式,其实就是自适应了。

      上面两款软件,其基本面向的是Webkit内核的浏览器,那么内嵌一个Webkit内核,来提供所见即所得的预览、编辑界面就是必须的了。他们都使用了CEF。(后面会介绍CEF和纯Webkit的差别)

    • Q+

      Q+在Web App的概念下,为Web页面提供了一个运行环境(简单来说就是:Client的一个框和一些可用的API),支持IE和Webkit内核。

      对Web开发同学来说,我们引入的Webkit内核(实际上是CEF),无需考虑IE的版本兼容问题,既提高了开发效率,又可以利用一些新的HTML5特性。当时Q+的应用市场、消息中心、壁纸、音乐Widget等应用都是基于Webkit内核开发的。

      Q+项目可以说对CEF进行了比较多的尝试,比如:

      • 开发的音乐Widget,就使用了HTML5的audio标签;

      • 一些应用使用了HTML5的离线功能(就是配个manifest文件那个),当然其中也遇到些曲折,收获了不少经验。

      • 打包的Webkit调试工具(Dev Tools)。

      • 自定义协议:比如对qplus://协议的访问,可以重定向到某个特殊文件夹之类的功能。

      • Off Screen Rendering(OSR,离屏渲染):通过离屏渲染 + Windows的Layered Window,就制作了不规则的网页窗口(网页不透明区域是什么形状,窗口就是什么形状)

    为什么要给客户端内嵌CEF?

    举了那么多例子之后,这个问题说起来就容易多了:

    • 用来展示Web页面,使用各种Web Service;
    • 用Web页面来做UI;
    • 使用HTML5的特性,比如audio、canvas等,包括CSS3特性等。
    • Off Screen Rendering(OSR,离屏渲染):

      所谓的OSR,就是不创建真窗口,将整个页面渲染到一张位图上面。当然不只是渲染,还有一系列的API来处理鼠标、键盘事件,处理输入法事件等。

      这个特性在不能使用真窗口的时候特别有用,比如Layered Window上面,或者是游戏中渲染到Texture上。

      利用OSR特性,可以做出一些有趣的效果,比如:

      AlloyTeam做出了Webtop,里面用OSR做了纯网页实现的浏览器、播放器等。

      有一个Awesomium项目,也是支持OSR,已经有游戏项目用Awesomium来在游戏中渲染网页了。 (看Awesomium的输出文件,应该和CEF的实现方式差不多,都是对Chromium的封装,Awesomium能做的CEF应该也可以做)

     据说好些牛X的产品都是使用了相关技术,各位看官请看:

     NanUI是园子一位伙伴“林选臣”的作品。这里只是借用一下他收集的图片。

    下面是正文:

    1、js调用C#的方法

      browser.RegisterJsObject("callHostFunction", new JsCallback(browser, this));

    JsCallback是个C#声明的一个类,browser是ChromiumWebBrowser的实例。RegisterJsObject表示注册一个js对象,对象名是callHostFunction.

    JsCallback里有个方法 比如:

     /// <summary>
            /// 方法名首字母小写,否则js会出现找不到方法
            /// </summary>
            public void callBackDemo()
            {
                new CashieActionForm().ShowDialog();
                //MessageBox.Show("JS request","From JS");
            }
    

     那么js应该这样写:

    <script type="text/javascript">
    
       function demo(){
    	callHostFunction.callBackDemo();
       }
       
       function ExecPayResult(para){
           alert(para);
       }
    </script>
    

     html : <input type="button" onclick="demo();" value="do feng`s 测试" id="btncookies" class="am-btn am-btn-danger" /> 

    2、C#调用js里的方法

     browser.ExecuteScriptAsync("ExecPayResult('123')", new object[]{}); 

    如上面举例就是C#代码里面调用js里面ExecPayResult方法,并传统参数'123'。

    不想做雷锋。主要是记录下来备忘的。

  • 相关阅读:
    exports 和 module.exports 的区别
    (转) 前端模块化:CommonJS,AMD,CMD,ES6
    使用原生的javascript来实现轮播图
    使用C3的一些新属性绘制谷歌浏览器的图标
    仿照jQuery进行一些简单的框架封装(欢迎指教~)
    canvas中的非零环绕原则
    利用canvas进行一个饼形图的绘制
    利用构造函数对canvas里面矩形与扇形的绘制进行一个封装
    利用canvas来绘制一个会动的图画,欢迎指教
    自己整理出来的一些用到的方法的封装,欢迎指教
  • 原文地址:https://www.cnblogs.com/datacool/p/datacool2016_sharpCEF.html
Copyright © 2020-2023  润新知