Logo

winform窗体嵌套HTML页面,开发出炫彩桌面程序,具备数据交互功能

photo

2023年12月08日

 

一: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

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
本文为原创文章,请注意保留出处!

调用WebService方法出现超时,可在客户端的Web.config如下设置:<sys...Webserviser请求通道在等待00:00:59.6479648以后答复时超时。增加传递给请求调用的超时值,或者增加绑定上的SendTimeout值。分配给此操作的时间可能是更长超时的一部分。

热门文章

Navicat Premium 12.0.22 安装与破解 一、安装  NavicatPremium12.0.22的下载链接:https://pan.ba...NavicatPremium12.0.22安装与破解 作者:Pastore Antonio
1516 浏览量
C# JArray与JObject 的使用 STEP1、usingNewtonsoft.Json.Linq;STEP2、如何获取json里的...C#JArray与JObject的使用 作者:Pastore Antonio
1466 浏览量
解决mysql的配置ONLY_FULL_GROUP_BY引起的错误 由于自己的本地网站环境使用了mysql8.0的版本,在测试一个groupby的sql查...解决mysql的配置ONLY_FULL_GROUP_BY引起的错误 作者:Pastore Antonio
1449 浏览量
Windows server 2016 英文服务器安装中文语言包教程 1、下载windowsserver2016语言包下载地址:https://pan.baidu....Windowsserver2016英文服务器安装中文语言包教程 作者:Pastore Antonio
1407 浏览量
《荒野猎人》经典语录 电影《荒野猎人》讲述19世纪的一个皮草猎人休·格拉斯在一次打猎中受了重伤,而后两个被船长雇用照顾他的人为了夺取他的财产,杀害了他的儿子,并把他丢在荒野中自生自灭。格拉斯在荒野中度过了艰难的几个月后开始了复仇。电影《荒野猎人》由迈克尔·彭克同名小说改编而成,夺得第73届金球奖和第88届奥斯卡金像奖多项大奖,男主角莱昂纳多凭借这部作品终于得到奥斯卡小金人。 作者:Pastore Antonio
1396 浏览量