winform窗體嵌套HTML頁面，開發出炫彩桌面程序，具有數據交互功能

一：CEF全稱Chromium Embedded Framework，是一個基於Google Chromium 的開源項目。Google Chromium項目主要是爲Google Chrome應用開發的，而CEF的目標則是爲第三方應用提供可嵌入瀏覽器支持。html

二：winform窗體嵌套HTML頁面須要CEF的相關組件添加到項目引用裏，文章結尾附有連接，還有一個模板demo僅供參考　　前端

三：winform窗體嵌入HTML的兩種狀況web

1，只是簡單的嵌入HTML頁面，沒有form窗體和頁面的邏輯交互，在引入cef組件的前提下，在winform窗體裏添加一個panel，而後實例化ChromiumWebBrowser 對象傳入請求頁面地址，最後把頁面添加到panel控件裏json

winform窗體代碼瀏覽器

using System; using System.Windows.Forms; namespace cefWinformTest { public partial class Form1 : Form { CefSharp.WinForms.ChromiumWebBrowser webCom = null; public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { string url = "www.baidu.com";//請求頁面地址
webCom = new CefSharp.WinForms.ChromiumWebBrowser(url);//傳入地址，實例化頁面對象 
webCom.Dock = DockStyle.Fill;//指定頁面停靠位置和方式
panel1.Controls.Add(webCom);//向panel1控件裏添加頁面
webCom.Load(url);//加載頁面
} } }

2：winform窗體和頁面存在邏輯交互，除了上訴的正常加載頁面，還要有交互邏輯類，在頁面也要處理交互數據，下面直接附上代碼，以供參考函數

winform窗體代碼post

using System; using System.Windows.Forms; namespace cefWinformTest { public partial class Form1 : Form { public BoundJs bound; CefSharp.WinForms.ChromiumWebBrowser webCom = null; public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { string url = Application.StartupPath + "\\test.html";//請求頁面地址
webCom = new CefSharp.WinForms.ChromiumWebBrowser(url);//傳入地址，實例化頁面對象
bound = new BoundJs(this.webCom);//實例化操做類，用於頁面數據交互
webCom.RegisterJsObject("bound", bound);//註冊綁定在頁面的操做類
webCom.Dock = DockStyle.Fill;//指定頁面停靠位置和方式
panel1.Controls.Add(webCom);//向panel1控件裏添加頁面
webCom.Load(url);//加載頁面
} } }

交互邏輯處理類BoundJs 測試

using Newtonsoft.Json; using System.Web.Script.Serialization; using System.Windows.Forms; namespace cefWinformTest { public class BoundJs { public CefSharp.WinForms.ChromiumWebBrowser OwnerBrowser; public BoundJs(CefSharp.WinForms.ChromiumWebBrowser OwnerBrowser)//構造與JS交互的方法
{ this.OwnerBrowser = OwnerBrowser; } public string myfunc(string strData) { //從頁面得到的數據裏取值
object username; object password; JavaScriptObject jsonObj = JavaScriptConvert.DeserializeObject<JavaScriptObject>(strData);//把gameInfo字符串轉化成objectJson對象取值
jsonObj.TryGetValue("userName", out username);//從strData裏取userName對應的值，userName與前端字段保持一致
jsonObj.TryGetValue("passWord", out password);//從strData裏取passWord具體的值
string name = username.ToString(); string pass = password.ToString(); MessageBox.Show("我是從頁面獲取的數據："+name+","+pass); //給頁面提交winform端給頁面須要的數據
string formdata = "new data for the page"; JavaScriptObject newJson = new JavaScriptObject();//實例化一個新對象，用於給前端返回新數據
newJson.Add("formData", formdata);//向jsonObj裏添加數據
var jsonData = new JavaScriptSerializer().Serialize(newJson); //把json對象，轉換爲json字符串
OwnerBrowser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("getInputData(" + jsonData + ");"); //其中「getInputData」是頁面的函數,jsonData做爲函數的參數，用於和頁面數據交互
return ""; } } }

測試頁面test.htmlthis

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
var formData; function getInputData(formData) { var data1 = document.getElementById("uId").value; var data2 = document.getElementById("pId").value; if (data1 != null && data2 != null) { var data = { 'userName': data1, 'passWord': data2 } if (formData == null) { //判斷winform端返回的數據爲空時執行此方法，不然該方法會不斷執行
bound.myfunc(JSON.stringify(data)); } } else { alert("用戶名或密碼不能爲空！"); } if (formData != null) { alert("我是Form窗體返回給頁面的數據：" + JSON.stringify(formData)); return; } } </script>
</head>
<body>
<div style="margin : 300px 500px 300px 500px; text-align:center; <form id="formId" method="post">
<br /> 用戶名：<input type="text" name="Name" value="" id="uId" placeholder="用戶" /><br /><br /> 密 碼：<input type="text" name="PassWord" value="" id="pId" placeholder="密碼" /><br /><br />
<input type="button" value="提交" onclick="getInputData()" />
</form>
</div>
</body>
</html>

四：demo效果圖url

--------------------------------------------------------------------

-------------------------------------------------------------------

簡單Demo僅供參考，最後提醒一下這個版本cef只支持x86的目標平臺，如今有cef(版本75.1.143.0)可解決「https://www.cnblogs.com/yply/p/12001931.html」

例子和組件下載提取碼：267g