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‘。

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

时间: 2024-12-27 20:35:45

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

【51CTO学院三周年】新技能GET&升职

做为一个毕业多年的不求上进的运维人员,总觉得生活不应当只有眼前的苟且,还应当有梦想,有远方和田野,诗酒就算了,诗,没有这文采,酒,不好这口~ 14年,决定要做点什么改变自身,提高自己的技能,说白了,就是多赚钱,因为本身就是计算专业出身,所以,还是喜欢码代码,以前搞过C#,但一丢多年,基本忘的差不多了.正好公司的部分软件是PHP做的,因此,打算学习下PHP,14年的春节,开始在这里学习. 说到PHP,刚毕业的时候总觉得这就是做网页的,没啥技术含量,没啥前途,心里一直存着一种轻视的心态.直到后来才明

[转载] 学习新技能的37个最佳网站

原文: http://codecloud.net/the-37-best-websites-to-learn-something-new-4772.html 大部分都是英文课程, 对英文要求较高, 有需求的时候查询吧. 忘了过于褒奖的学校.整天呆在拥挤的教室而效果却差得可怜.这些网站和应用涵盖了科学.艺术和技术的无数话题.它们可以教会你实践练习任何技能,从制作豆沙到用 node.js 开发 app,而且它们都是免费的.你绝对没有任何理由不去掌握一个新技能.拓展你的知识,或最终助长你的职业发展.你

38个学习新技能的最佳网站

忘了过于褒奖的学校.整天呆在拥挤的教室而效果却差得可怜.这些网站和应用涵盖了科学.艺术和技术的无数话题.它们可以教会你实践练 习任何技能,从制作豆沙到用 node.js 开发 app,而且它们都是免费的.你绝对没有任何理由不去掌握一个新技能.拓展你的知识,或最终助长你的职业发展.你可以根据自己的节奏呆在自己舒适的家里交 互式地学习.无法想象还有比这更容易的了,坦诚地说,你还在等什么呢? 参加在线课程 edX—参加来自全球最好的大学的在线课程. Coursera—参加全世界最好的在线免费课程. C

独家秘笈!教你解锁移动应用新技能

随着越来越多的企业关注.投身到移动事业,移动开发的需求也日益增加,一时间精通移动开发的人员变得供不应求.然鹅,想要成为炙手可热的开发者,则需要不断进阶新的技能.路漫漫其修远兮,本篇文章将会重点介绍 Azure 移动服务,来说明它对开发者解锁新技能有何帮助? Azure 移动应用的特点与功能 数据访问 ? 提供了一个移动友好的 Odatav3 数据源,可链接到 SQL  Azure 或本地 SQL Server. ? 此服务可以基于 EntityFramework,可轻松地与其他 NoSQL 和

BPM实例分享:玩转数据字典新技能-字典库排序

有童鞋问到字典库的排序问题,这里简单介绍一个新技能. 数据字典使用场景:请假流程里的请假类型,有病假.事假.调休等.定义数据字典,并且在流程中使用SheetDropDownList或SheetRadioButtonList展现由用户来选择,如图: 数据字典 使用SheetDropDownList,并且设置该控件的属性MasterDataCategory为"请假类型",其代码可能如下: <SheetControls:SheetDropDownListID="SheetDr

腾讯优测干货精选| 安卓开发新技能Get -常用必备小工具汇总

文/腾讯公司 陈江峰 优测小优有话说: 移动研发及测试干货哪里找?腾讯优测-优社区你值得拥有~ 开发同学们都知道,安卓开发路上会碰到很多艰难险阻,一不小心就被KO.这时候,没有新技能傍身怎么行?今天我特意将自己使用过的安卓开发小工具进行了汇总,希望与大家共同进步. 话不多说,实用工具大讲堂现在开始! Lint(清理资源.安全检查.layout优化等) 一般在提测前清理一下冗余资源,查一下有没有用了一些高API Level才有的接口,查一下安全问题. Findbugs(检查java代码缺陷)在开发

新技能get:Android应用优化技能之“延迟加载”术

世风日下,人心不古. 如今四海虽看似太平,其实却暗藏杀机.大到一架飞机一辆公交,小到一个app,都会让您抓狂. 越来越复杂的界面,越来越多的需求,对app来说本身来说就是一个噩耗,但在人类无穷的想象力,在功能模块无情的堆积之下,对于应用来说,要么瘦,要么死! 那么如何瘦,怎么瘦?对广大爱美的程序员和产品和用户来说,只有简约,按需才是王道. 旁白:写文章就写文章嘛,废话太多了! [这是正题]上面一堆废话其实也是有两个有用的词汇的,简约和按需.简约是设计要想的,那么按需就是我们程序将要做的. [按需

云开发数据库又增新技能!

l 开篇彩蛋 由于近期小程序·云开发将上线付费功能(付费功能针对非基础资源配额,基础资源配额仍可免费使用).为了给开发者更充足的时间进行调整,对于截止 2019-06-21 日前通过邮件申请调整的配额(非基础资源配额)的截止日期统一延长至 2019-08-31. 为了方便开发者进行功能开发并提高开发效率,「小程序·云开发」近期进行了一系列的功能优化.开发者可通过下载最新 Nightly Build 版的开发者工具进行功能体验. l 云开发的成长,需要你支持 为了给开发者提供更优质的服务,我们诚邀

iOS js oc相互调用(JavaScriptCore)(二)

http://blog.csdn.net/lwjok2007/article/details/47058795 上节地址 http://blog.csdn.net/lwjok2007/article/details/47058101 接着上节我们讲到的iOS调用js 下来我们使用js调用iOS js调用iOS分两种情况 一,js里面直接调用方法 二,js里面通过对象调用方法 首先我们看第一种,直接调用方法. 其中用到了iOS的block 上代码 [objc] view plaincopy -(v

node源码详解(四) —— js代码如何调用C++的函数

声明:转载请保留声明头部并标明转载.并私信告知作者.原文:http://www.cnblogs.com/papertree/p/5285705.html 上面讲到node调用Script::Compile()和Script::Run()解析执行app.js,并把io操作和callback保存到default_loop_struct,那么app.js里面js代码如何调用C++的函数呢? 在4.2节进行解释,先在4.1节来点知识预热. 4.1 V8运行js代码的基础知识 —— V8的上下文 来看看g