5

WinForm嵌入Web网页的解决方案

 3 years ago
source link: https://www.cnblogs.com/SavionZhang/p/15169863.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
WinForm嵌入Web网页的解决方案 - 张传宁 - 博客园

  企业级信息化系统绝大部分采用BS架构实现,如门户网站、OA系统、电商网站等,通过浏览器输入Web网址即可访问,对于使用者来说非常便捷,对于开发维护者来说也非常方便,程序维护只需更新服务器即可,使用者无感知。但是CS架构的WinForm客户端程序仍然具有很实用的价值,如WPS、IT类的集成开发环境(数据库、图形处理软件)、PC端的小工具。本地程序处理性能更优秀,但是频繁更新带来不友好的客户端体验。还有一种非常常见且实用的业务场景, Web网页与WinForm程序互相集成应用。

  在百度网盘的网页中,点击【下载】按钮,首先会检查本地是否已经启动客户端网盘。如果未启动,则弹出提示信息告知用户需要打开客户端程序进行下载。这就是一个典型的Web网页中启动客户端程序的场景。更形象的应用场景是,WinForn/WPF客户端程序嵌入Web程序,Web程序的网页中js调用WinForm/WPF窗体以及业务方法。后面会详细的介绍。

142275-20210823111001217-418722518.png

  WinForm程序中集成网页的基本原理就是通过一个包含类似浏览器功能的控件,将Web网页载入并解析渲染出来。下面主要介绍 WinForm 集成 Web 网页的几种实现方式。

142275-20210823111620142-1326943432.png

  谈论集成的问题之前,先了解一下浏览器的内核。

  浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

142275-20210821162713901-1031924389.png

内核分类
  • 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 默认浏览器。

142275-20210824225545478-1206972705.png

 参考网站:https://liulanmi.com/labs/core.html

  • Blink

  Blink是一个由Google和Opera Software开发的浏览器排版引擎,Google计划将这个渲染引擎作为Chromium计划的一部分,并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支,并且在Chrome(28及往后版本)、Opera(15及往后版本)和Yandex浏览器中使用。

142275-20210824225720512-844983375.png

浏览器内核检测
  • ie.icoa.cn

https://ie.icoa.cn 可检测 PC 或手机浏览器内核和操作系统类型,包括Google Chrome的WebKit、IE的Trident、ME的Edge、Firefox的Gecko/Servo,以及Windows/MacOS/Linux/iOS/Android等的判断。

142275-20210824231617837-156152079.png
142275-20210824230625920-2045747484.png
142275-20210824231527825-1397684970.png
  • http://mybrowse.osfipin.com
142275-20210824231244231-1812062493.png
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等新技术。

142275-20210824235936514-1598755752.png
  • Miniblink

  Miniblink是一个追求极致小巧的浏览器内核项目,全世界第三大流行的浏览器内核控件。其基于chromium最新版内核,去除了chromium所有多余的部件,只保留最基本的排版引擎blink。Miniblink保持了10M左右的极简大小,是所有同类产品最小的体积,同时支持windows xp、npapi。

         

142275-20210824233235750-587345207.png
  • GeckoFX

  GeckoFX是skybound工作室开发的一个开源的用于方便将gecko引擎(最主要的浏览器是firefox)链接到.net 窗体应用的一个组件。它是用C#写成的,里面有大量的C#的注释,geckofx是最完美的默认的iE核心webbrowse控件的替代控件。

  • DotNetBrowser

  DotNetBrowser能嵌入一个基于Chromium的WPF或WinForms组件到你的.NET应用中,用来显示使用HTML5、CSS3、JavaScript、Silverlight等技术构建的现代网页。

           

142275-20210824233937263-1432975238.png
  • EO.WebBrowser
    • 官网:https://www.essentialobjects.com/Products/WebBrowser/Default.aspx

           

142275-20210824233830302-65600190.png
  • Microsoft Edge WebView2

Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge(Chromium) 作为绘制引擎,以在本机应用中显示 web 内容。 使用 WebView2,可以在本机应用的不同部分嵌入 Web 代码,或在单个 WebView 实例中生成所有本机应用。

142275-20210825102031053-1798269533.png
142275-20210825102527819-710349664.png
  • 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。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK