WinForm/WPF程序嵌入Web网页的解决方案

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

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

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

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

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

内核分类

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 默认浏览器。

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

Blink

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

浏览器内核检测

ie.icoa.cn

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

http://mybrowse.osfipin.com

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较全面。

实际项目应用效果如下：

Miniblink

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

开源地址：https://github.com/weolar/miniblink49/releases

GeckoFX

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

DotNetBrowser

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

收费

EO.WebBrowser

官网：https://www.essentialobjects.com/Products/WebBrowser/Default.aspx
收费

Microsoft Edge WebView2

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

官网：https://docs.microsoft.com/zh-cn/microsoft-edge/webview2
免费。
诞生较晚，相比CefSharp，功能较弱。

所以在客户端程序中嵌入网页程序，首选CefSharp。

欢迎关注、点赞、评论、转发，每天都能获取IT优质内容。

#人民网评钱枫被指性侵#

azor 同时支持 C# (C sharp) 和 VB (Visual Basic)。

主要的 Razor C# 语法规则

Razor 代码块包含在 @{ ... } 中
内联表达式（变量和函数）以 @ 开头
代码语句用分号结束
变量使用 var 关键字声明
字符串用引号括起来
C# 代码区分大小写
C# 文件的扩展名是 .cshtml

C# 实例

@{ var myMessage ="Hello World"; }

<p>The value of myMessage is: @myMessage</p>

var greeting = "Welcome to our site!";

var weekDay = DateTime.Now.DayOfWeek;

var greetingMessage = greeting + " Here in Huston it is: " + weekDay;

}

<p>The greeting is: @greetingMessage</p>

运行实例 »

主要的 Razor VB 语法规则

Razor 代码块包含在 @Code ... End Code 中
内联表达式（变量和函数）以 @ 开头
变量使用 Dim 关键字声明
字符串用引号括起来
VB 代码不区分大小写
VB 文件的扩展名是 .vbhtml

实例

@Code dim myMessage = "Hello World" End Code

<p>The value of myMessage is: @myMessage</p>

@Code

dim greeting = "Welcome to our site!"

dim weekDay = DateTime.Now.DayOfWeek

dim greetingMessage = greeting & " Here in Huston it is: " & weekDay

End Code

<p>The greeting is: @greetingMessage</p>

运行实例 »

它是如何工作的？

Razor 是一种将服务器代码嵌入在网页中的简单的编程语法。

Razor 语法是基于 ASP.NET 框架，专门用于创建 Web 应用程序的部分 Microsoft.NET 框架。

Razor 语法支持所有 ASP.NET 的功能，但是使用的是一种简化语法，对初学者而言更容易学习，对专家而言更有效率的。

Razor 网页可以被描述成带以下两种类型内容的 HTML 网页： HTML 内容和 Razor 代码。

当服务器读取页面时，它首先运行 Razor 代码，然后再发送 HTML 页面到浏览器。在服务器上执行的代码能够执行一些在浏览器上不能完成的任务，比如，访问服务器数据库。服务器代码能创建动态的 HTML 内容，然后发送到浏览器。从浏览器上看，服务器代码生成的 HTML 与静态的 HTML 内容没有什么不同。

带 Razor 语法的 ASP.NET 网页有特殊的文件扩展名 cshtml（Razor C#）或者 vbhtml（Razor VB）。

使用对象

服务器编码往往涉及到对象。

"Date" 对象是一个典型的内置的 ASP.NET 对象，但对象也可以是自定义的，一个网页，一个文本框，一个文件，一个数据库记录，等等。

对象有用于执行的方法。一个数据库记录可能有一个 "Save" 方法，一个图像对象可能有一个 "Rotate" 方法，一个电子邮件对象可能有一个 "Send" 方法，等等。

对象也有用于描述各自特点的属性。一个数据库记录可能有 FirstName 和 LastName 属性。

ASP.NET Date 对象有一个 Now 属性（写成 Date.Now），Now 属性有一个 Day 属性（写成 Date.Now.Day）。下面实例演示了如何访问 Data 对象的一些属性：

实例

<tr>

<td width="100px">Value</td>

</tr>

<tr>

<td>Day</td><td>@DateTime.Now.Day</td>

</tr>

<tr>

<td>Hour</td><td>@DateTime.Now.Hour</td>

</tr>

<tr>

<td>Minute</td><td>@DateTime.Now.Minute</td>

</tr>

<tr>

<td>Second</td><td>@DateTime.Now.Second</td>

</tr>

</td>

</table>

运行实例 »

If 和 Else条件

动态网页的一个重要特点是，您可以根据条件决定做什么。

做到这一点的常用方法是使用 if ... else 语句：

实例

var txt = "";

if(DateTime.Now.Hour > 12)

{txt = "Good Evening";}

else

{txt = "Good Morning";}

}

<html>

<body>

<p>The message is @txt</p>

</body>

</html>

、基本的css兼容：

1、可能很多人喜欢用css hack的形式去兼容ie浏览器，但是我自己用起来感觉其实不好使。ie7-就不考虑了，问题在哪呢，就在ie8的甑别上，你怎么让样式只对ie8起作用。上网搜你可能会得到这样的答案：

.selector { color: #ff0>.selector { color: #ff0\0;/*ie8*/ color: #f00\9\0;/*ie9+*/}<;/*ie8*/ color: #f00>.selector { color: #ff0\0;/*ie8*/ color: #f00\9\0;/*ie9+*/}<;/*ie9+*/}

但是实际上你一试就嗝屁了，因为ie8他就是识别ie9能识别的，所以根本不能让独立的样式只对ie8起作用。

（这个hack是可以区分ie8和ie9的，之前由于未知原因导致浏览器测试不成功，重装系统后发现是可用的，后来又在多台机器上测试过，证明是正确的。很抱歉误导了大家，特此修正，仍然建议用文档注释的方式去独立写hack，当然最好是可以优雅降级，避免使用css hack。）

更好用的是什么呢，是用ie浏览器独有的文档注释的方式。像这样：

<!DOCTYPE html><html lang="en">

屡试不爽，关键是可以独立的维护处理兼容ie浏览器的样式表，又不会淹没在一大堆css hack标识中，只需要在独立对ie8应用样式规则的地方，copy该条规则，然后在前面加上 .ie8然后就能随便写了，对付ie9也一样。

2、对于360双核这种找抽浏览器，据说添加以下头部meta信息可以使得网页用webkit内核渲染：

IE=edge：保持使用最高级别模式显示内容；

chrome=1：谷歌的外挂插件Google Chrome Frame（谷歌内嵌浏览器框架GCF），使用IE浏览网页时实际上是使用Chrome浏览器内核渲染，最低支持IE6，但前提是客户端已经安装GCF。

但实际上这个meta标识是ie浏览器所识别的（详情：)，并不是公认的标准，所以用双核的浏览器会傲娇。当然360也会傲娇，所以有时你会发现360并不能总是（也可能是我本人rp差）以chrome内核渲染你的按现代标准开发的网页。

那么试试这个吧，添加：<meta name="renderer" content="webkit">

这个meta标识是360自家实现的(详情：)，表示强制要求360这造福中国社会万千网民的浏览器用chrome的内核渲染网页。

ok，一行代码搞定360绝大部分的兼容。

二、ie8的css兼容

现在说说ie8下的css问题：

1、ie8支持:first-child,但不支持:last-child。因为前者是css2.1标准，后者是css3标准。参下：

CSS 2.1 selectors：Basic CSS selectors including: * (universal selector), > (child selector), :first-child, :link, :visited, :active, :hover, :focus, :lang(), + (adjacent sibling selector), [attr], [attr="val"], [attr~="val"], [attr|="bar"], .foo (class selector), #foo (id selector)

2、为什么会发现上面的奇怪的东西（怪我css2.1和css3分不清），因为编译sass文件后发现ie8下的样式基本全歇菜了。需要注意的是，如果浏览器不支持的选择器和支持的选择器写在一起，那么整条规则就不起作用了。比如你不小心创造了一个伪元素（是真的伪哦）.bb:bb-child, .cc{background:#333;}那么这整条规则就不起作用了，所有浏览器在此情况下都会歇菜,.cc的样式就丢失了。

3、 input设置了左右padding，but输入较多内容时padding还是会消失。这个问题是无解的，ie浏览器她就是这么渲染input的，解决方法是在input 外面套一层div，用div设置左右padding，border，width和height，input只需要设置width和weight为100% 即可。另外，正常来讲，如果没有明确设置height的值，那么设置的line-height值就是height的值，but对于ie8，如果input 设置了 line-height，那么input必须设置height，否则input的内容显示有问题，会上下隐藏部分内容，她就是要躲猫猫。

4、为什么上面我不用input的伪元素进行设置而要嵌套多一层div呢？因为input，img，iframe等元素不支持伪元素 -_-||。:before 和:after伪元素指定了一个元素文档树内容之前和之后的内容。与'content'属性联用,指定了插入的内容（也就是你必须显性设置content 属性这两个伪家伙才能在文档中显示出来，哪怕设置content属性为空字符串也行）。作为DOM元素，伪元素都是在容器内进行渲染的, input，img，iframe等元素都不能包含其他元素，也就是不是容器，所以不能通过伪元素插入内容。

5、 table中如果不是严格的用于表格，而是用于奇葩的局部布局时（我也想问为什么用来布局。。），td设置成inline-block可以排成一行，但是 ie8和ie9 下，如果td中的内容很长，即使td设置了宽度，td也会撑开并占用td设置的margin（废话，td是没有margin可言的），直到挤占所有的td 宽度之和为tr的宽度。但是td设置成float：left；就能表现成block。这个不清楚为什么，但是管用。。

6、父元素的左padding会和子元素的左margin重叠。这个是没有好好实现盒子模型的事情了，包容吧。。

7、sprite图中的icons之间最好留空白间隔，哪怕间隔1px也好，否则ie8下会出现使用了某一个icon当背景，icon后面跟着的其他icon也顺带显示了一小部分的bug，所以icons之间还是要适当留白，不要太省。

三、ie11部分css问题

1、ie11下很多元素表现和其他浏览器不一致，比如对应用了同一样式（不设置高度）的div，其他浏览器解析的高度是一致的，但是ie11下该div有可能高度偏大，由此导致一些排版上的问题，所以，如果发现元素排版上下偏移的问题，查看此元素或其当代元素是否设置了高度，统一添上高度一切都ok了。

2、抱歉，ie11问题确实不多。

四、结尾附上一个关于css优先级的奇谈

首先我们知道：

1、id选择器优先级权重比class选择器大一个数量级，class选择器权重比标签选择器大一个数量级；

2、class选择器和属性选择器同优先级;

3、样式的优先程度需要根据第1条规则计算整体的优先级，按选择器权重计算各条样式规则中所有选择器优先级之和，哪条规则权重大，那条就说了算。如果相同那么后面的覆盖前面的。4、像这种.dog > p开挂，多了特殊符号的，并不会增加优势，还是和 .dog p优先级一样。

然后可以抛出一个问题了：

对于下面的文档结构，分别对 p | .p | div p | .parent | #parent设置color属性，那么优先级如何呢？

</div>

结果很有意思：

也就是 .p > div p > p > #parent > .parentid选择器居然比p选择器优先级还低！将p元素和div元素分开看，.p > div p > p 很正常， #parent > .parent也很正常。所以问题关键在子级p和父级#parent, 子级的选择器优先级比父级的选择器优先级高，或者说继承的优先级程度比自身的优先级低！嵌套多一层看看就知道是不是了，分别对#parent | div | p设置color属性：<div id="parent" class="parent"> <div class="mid"> <p id="p" class="p">p</p> <div></div>结果确实是p > div > #parent：

即使应用两个选择器也无济于事，依然是p >#parent div

但是只要能定位到p元素，那么父级选择器的权重就起作用了,一试便知，对#parent p | #p 设置同样的样式结果是这样的：

嗯，确实如此。所以：

5、css样式优先级还和继承有关，继承的优先级不如本身应用的优先级高。

总结完毕，敬礼。

在线咨询

上一篇：HTML里h1~h6标签和p标签里的内容不会自动换行？
下一篇：HTML的frame框架使用完整总结（web初学必看）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

WinForm/WPF程序嵌入Web网页的解决方案

您的项目需求