winform窗體巢狀HTML頁面，開發出炫彩桌面程式
一：CEF全稱Chromium Embedded Framework，是一個基於Google Chromium 的開源專案。Google Chromium專案主要是為Google Chrome應用開發的，而CEF的目標則是為第三方應用提供可嵌入瀏覽器支援。
二：winform窗體巢狀HTML頁面需要CEF的相關元件新增到專案引用裡，文章結尾附有連結，還有一個模板demo僅供參考
三：winform窗體嵌入HTML的兩種情況
1，只是簡單的嵌入HTML頁面，沒有form窗體和頁面的邏輯互動，在引入cef元件的前提下，在winform窗體裡新增一個panel，然後例項化ChromiumWebBrowser 物件傳入請求頁面地址，最後把頁面新增到panel控制元件裡
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窗體程式碼
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 + ");"); //其中“getCSdata”是頁面的函式,jsonData作為函式的引數，用於和頁面資料互動
return "";
}
}
}
測試頁面test.html
<!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效果圖
-------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
簡單Demo僅供參考，至於巢狀什麼頁面看大家自己的業務了。
例子和元件下載 提取碼：267g