一：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 + ");"); //其中“getInputData”是頁面的函數,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僅供參考，最后提醒一下這個版本cef只支持x86的目標平台，現在有cef(版本75.1.143.0)可解決“https://www.cnblogs.com/yply/p/12001931.html”
例子和組件下載 提取碼：267g