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'。
不想做雷鋒。主要是記錄下來備忘的。