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 + ");"); //其中“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
winform窗体嵌套HTML页面,开发出炫彩桌面程序的更多相关文章
- 有了这个开源 Java 项目,开发出炫酷的小游戏好像不难?
本文适合有 Java 基础知识的人群,跟着本文可学习和运行 Java 的游戏. 本文作者:HelloGitHub-秦人 HelloGitHub 推出的<讲解开源项目>系列,今天给大家带来一 ...
- C# winform 窗体从右下角向上弹出窗口效果
参考自 http://blog.csdn.net/yilan8002/article/details/7197981 /// <summary> /// 窗体动画函数 注意:要引用Syst ...
- 【转】使用Xcode中的iOS SDK给iphone开发出第一个App程序
之前已经折腾过用Xcode开发OS X的程序了,现在继续折腾,用iOS SDK开发移动设备(iphone/ipad/ipod touch)的程序. 1.从iOS Developer Library中找 ...
- Android系统提供了哪些东西,供我们可以开发出优秀的应用程序
1. 四大组件Android系统四大组件分别是活动(Activity).服务(Service).广播接收器(Broadcast Receiver)和内容提供器(Content Provider).其中 ...
- 使用C#创建winform窗体,修改debugwen文件夹下exe应用程序的默认图标
在做一个接口程序是遇到的问题,记录一下: 在解决方案资源管理器上,右击项目名称——属性——点击图标和清单右边的的按纽——去Debug文件夹中找到自己的图标,打开.然后保存.
- 如何开发出优秀的APICloud应用
APICloud定制平台项目实施规范 APICloud应用优化策略Top30 如何开发出运行体验良好.高性能的App 如何开发出客户满意.能够顺利交付的App 1. 引擎或模块问题: 遇到应用层无法解 ...
- WinForm 窗体属性 窗体美化
WinForm是·Net开发平台中对Windows Form的一种称谓. Windows窗体的一些重要特点如下: 功能强大:Windows窗体可用于设计窗体和可视控件,以创建丰富的基于Windows的 ...
- 客户端(Winform窗体)上传文件到服务器(web窗体)简单例子
客户端:先创建一个winform窗体的应用程序项目 项目结构
- 单例模式(Winform窗体的实现)
在我的设计模式分类当中,我选择单例模式作为我第一个要写的设计模式,其一,单例模式简单.容易理解让人接受,其二,单例模式很常用,在实际的Winform窗体应用开发中能够带来更好的客户体验. 单例模式的核 ...
随机推荐
- 【spring源码分析】IOC容器初始化(二)
前言:在[spring源码分析]IOC容器初始化(一)文末中已经提出loadBeanDefinitions(DefaultListableBeanFactory)的重要性,本文将以此为切入点继续分析. ...
- SQL COUNT() 函数
COUNT() 函数返回匹配指定条件的行数. SQL COUNT() 语法 SQL COUNT(column_name) 语法 COUNT(column_name) 函数返回指定列的值的数目(NULL ...
- NOIP 2018 大翻车记
都9102年了我才想起来写游记啊 Day -1 肚子里翻江倒海,一天去了七次厕所.吃了PPA把病压下去.安慰一下自己,说这样会涨人品. Loli讲述学长们的翻车笔记.我大概像是玩笑一样听过去了.(伏笔 ...
- 元素定位之Ui-Automator-Viewer的使用
下载uiautomatorviewer升级版 1. 将所有jar包拷贝到%SDK%/tools\lib目录下,覆盖原来的uiautomatorviewer.jar2. 使用%SDK%/tools\ui ...
- Charles抓包工具使用
Charles抓包工具使用和进行接口数据模拟 打开软件,选择Tools >> Map Local >> 勾选enable >> add >> ...
- JS 输入框输入数字检查
<input id='ApplyInputNum' type='text' class='mytext form-control' align='left' onblur='InputCheck ...
- Acdream1201 SuSu's Power
题目:SuSu's Power 链接:http://acdream.info/problem?pid=1201 题意:一个人站在x轴原点上,初始方向向x轴正方向,由一个字符串来控制其运动,字符串由A. ...
- POJ 1915 Knight Moves
POJ 1915 Knight Moves Knight Moves Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 29 ...
- Fetch API & Async Await
Fetch API & Async Await const fetchJSON = (url = ``) => { return fetch(url, { method: "G ...
- Java内存溢出和内存泄露后怎么解决
1.首先这里先说一下内存溢出和内存泄露的区别: 内存溢出 out of memory,是指程序在申请内存时,没有足够的内存空间供其使用,出现out of memory:比如申请了一个integer,但 ...