WinForm嵌入Web網頁的解決方案

張傳寧發表於2021-08-25

  企業級資訊化系統絕大部分採用BS架構實現,如入口網站、OA系統、電商網站等,通過瀏覽器輸入Web網址即可訪問,對於使用者來說非常便捷,對於開發維護者來說也非常方便,程式維護只需更新伺服器即可,使用者無感知。但是CS架構的WinForm客戶端程式仍然具有很實用的價值,如WPS、IT類的整合開發環境(資料庫、圖形處理軟體)、PC端的小工具。本地程式處理效能更優秀,但是頻繁更新帶來不友好的客戶端體驗。還有一種非常常見且實用的業務場景, Web網頁與WinForm程式互相整合應用。

  在百度網盤的網頁中,點選【下載】按鈕,首先會檢查本地是否已經啟動客戶端網盤。如果未啟動,則彈出提示資訊告知使用者需要開啟客戶端程式進行下載。這就是一個典型的Web網頁中啟動客戶端程式的場景。更形象的應用場景是,WinForn/WPF客戶端程式嵌入Web程式,Web程式的網頁中js呼叫WinForm/WPF窗體以及業務方法。後面會詳細的介紹。

WinForm嵌入Web網頁的解決方案

  WinForm程式中整合網頁的基本原理就是通過一個包含類似瀏覽器功能的控制元件,將Web網頁載入並解析渲染出來。下面主要介紹 WinForm 整合 Web 網頁的幾種實現方式。

WinForm嵌入Web網頁的解決方案

  談論整合的問題之前,先了解一下瀏覽器的核心。

  瀏覽器最重要或者說核心的部分是“Rendering Engine”,可大概譯為“渲染引擎”,不過我們一般習慣將之稱為“瀏覽器核心”。負責對網頁語法的解釋(如標準通用標記語言下的一個應用HTML、JavaScript)並渲染(顯示)網頁。 所以,通常所謂的瀏覽器核心也就是瀏覽器所採用的渲染引擎,渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。不同的瀏覽器核心對網頁編寫語法的解釋也有不同,因此同一網頁在不同的核心的瀏覽器裡的渲染(顯示)效果也可能不同,這也是網頁編寫者需要在不同核心的瀏覽器中測試網頁顯示效果的原因。

WinForm嵌入Web網頁的解決方案

核心分類
  • Trident(MSHTML、IE核心)

  核心被包含在全世界最高的使用率的作業系統中,即為Windows作業系統,所以我們又經常把它稱之為IE核心。

  Trident核心的常見瀏覽器有: 

    • IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0)、IE11
    • 360安全瀏覽器(1.0-5.0為Trident,6.0為Trident+Webkit,7.0為Trident+Blink)
    • 360極速瀏覽器(7.5之前為Trident+Webkit,7.5為Trident+Blink)
    • 百度瀏覽器(早期版本)
    • 世界之窗瀏覽器(最初為IE核心,2013年採用Chrome+IE核心)
    • UC瀏覽器(Webkit核心+Trident核心)
    • 其他等

  其中部分瀏覽器的新版本是“雙核”甚至是“多核”,其中一個核心是Trident,然後再增加一個其他核心。國內的廠商一般把其他核心叫做“高速瀏覽模式”,而Trident則是“相容瀏覽模式”,使用者可以來回切換。

  • Gecko(Firefox核心)

  Gecko核心常見的瀏覽器:Mozilla Firefox、Mozilla SeaMonkey、waterfox(Firefox的64位開源版)、Iceweasel、Epiphany(早期版本)、Flock(早期版本)、K-Meleon。

  • Webkit(Safari核心,Chrome核心原型,開源)

  WebKit核心常見的瀏覽器:Chrome、傲遊瀏覽器3、Apple Safari (Win/Mac/iPhone/iPad)、Symbian手機瀏覽器、Android 預設瀏覽器。

WinForm嵌入Web網頁的解決方案

 參考網站:https://liulanmi.com/labs/core.html

  • Blink

  Blink是一個由Google和Opera Software開發的瀏覽器排版引擎,Google計劃將這個渲染引擎作為Chromium計劃的一部分,並且在2013年4月的時候公佈了這一訊息。這一渲染引擎是開源引擎WebKit中WebCore元件的一個分支,並且在Chrome(28及往後版本)、Opera(15及往後版本)和Yandex瀏覽器中使用。

WinForm嵌入Web網頁的解決方案

瀏覽器核心檢測
  • ie.icoa.cn

https://ie.icoa.cn 可檢測 PC 或手機瀏覽器核心和作業系統型別,包括Google Chrome的WebKit、IE的Trident、ME的Edge、Firefox的Gecko/Servo,以及Windows/MacOS/Linux/iOS/Android等的判斷。

WinForm嵌入Web網頁的解決方案

WinForm嵌入Web網頁的解決方案

WinForm嵌入Web網頁的解決方案

  • http://mybrowse.osfipin.com

WinForm嵌入Web網頁的解決方案

WinForm Browser 控制元件
  • WebBrowser

   微軟WinForm開發框架中老牌控制元件。

    • 預設基於IE7核心,對H5網頁載入支援不完善。
    • 只支援單執行緒模式,大部分對其操作必須在建立它的執行緒中執行,不可以在其它執行緒中呼叫其方法或屬性。
    • 效能相對較弱。
  • CefSharp【推薦】

  CefSharp是一種將功能齊全的符合標準的web瀏覽器嵌入C#或VB.NET應用程式的簡單方法。CefSharp擁有WinForms和WPF應用程式的瀏覽器控制元件,以及自動化專案的OffScreen版本。CefSharp基於Chromium Embedded Framework,這是Google Chrome的開源版本。

    • CefSharp中文幫助文件,請點選檢視
    • 免費、開源:https://github.com/cefsharp/CefSharp
    • 支援JS、C#、WinForm窗體之間相互通訊與呼叫。
    • 相容性較好,支援H5、CSS5、WebGL等。
    • 支援獲取Cookies較全面。

實際專案應用效果如下圖。

呈現的模型是三維BIM模型,裡面用到了HTML5、CSS3、WebGL等新技術。

WinForm嵌入Web網頁的解決方案

  • Miniblink

  Miniblink是一個追求極致小巧的瀏覽器核心專案,全世界第三大流行的瀏覽器核心控制元件。其基於chromium最新版核心,去除了chromium所有多餘的部件,只保留最基本的排版引擎blink。Miniblink保持了10M左右的極簡大小,是所有同類產品最小的體積,同時支援windows xp、npapi。

          WinForm嵌入Web網頁的解決方案

  • GeckoFX

  GeckoFX是skybound工作室開發的一個開源的用於方便將gecko引擎(最主要的瀏覽器是firefox)連結到.net 窗體應用的一個元件。它是用C#寫成的,裡面有大量的C#的註釋,geckofx是最完美的預設的iE核心webbrowse控制元件的替代控制元件。

  • DotNetBrowser

  DotNetBrowser能嵌入一個基於Chromium的WPF或WinForms元件到你的.NET應用中,用來顯示使用HTML5、CSS3、JavaScript、Silverlight等技術構建的現代網頁。

           WinForm嵌入Web網頁的解決方案

    • 收費
  • EO.WebBrowser
    • 官網:https://www.essentialobjects.com/Products/WebBrowser/Default.aspx
    • 收費

           WinForm嵌入Web網頁的解決方案

  • Microsoft Edge WebView2

  Microsoft Edge WebView2 控制元件允許在本機應用中嵌入 web 技術(HTML、CSS 以及 JavaScript)。 WebView2 控制元件使用 Microsoft Edge(Chromium) 作為繪製引擎,以在本機應用中顯示 web 內容。 使用 WebView2,可以在本機應用的不同部分嵌入 Web 程式碼,或在單個 WebView 例項中生成所有本機應用。

WinForm嵌入Web網頁的解決方案

WinForm嵌入Web網頁的解決方案

  • BlazorWebView

  RemoteBlazorWebView.Wpf.BlazorWebView、RemoteBlazorWebView.WindowsForms.BlazorWebView 是基於 .NET 6 Preview 7 開發的 Blazor WebView 控制元件,支援WinForm 與 WPF。

    • 開源地址:https://github.com/budcribar/RemoteBlazorWebView
    • 示例程式:https://github.com/budcribar/RemoteBlazorWebViewTutorial

綜合考慮,在客戶端程式中嵌入網頁程式,首選CefSharp。

相關文章