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

 

不想做雷鋒。主要是記錄下來備忘的。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM