首先要搭建环境
新建winform项目GoogleChromeTest
管理NuGet程序包,搜索cef,安装CefSharp.WinForms
这里选的是X86运行环境,所以要添加X86的引用,(如果需要X64开发,可以选择X64,后面的引用也要改成X64)
添加引用
在项目文件夹下有个packages文件
添加里面的
packages\CefSharp.WinForms.57.0.0\CefSharp\x86\CefSharp.WinForms.dll
packages\CefSharp.Common.57.0.0\CefSharp\x86\CefSharp.BrowserSubprocess.Core.dll
packages\CefSharp.Common.57.0.0\CefSharp\x86\CefSharp.Core.dll
packages\CefSharp.Common.57.0.0\CefSharp\x86\CefSharp.dll
这时生成一下项目,然后重新启动VS
这时我们开始写代码了
增加两个button,一个textBox
主界面的代码如下
using CefSharp.WinForms; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; namespace GoogleChromeTest { public partial class Form1 : Form { ////// Chromium浏览器实例 /// ChromiumWebBrowser WebBrowser; public Form1() { InitializeComponent(); ///设置 var setting = new CefSharp.CefSettings(); setting.Locale = "zh-CN"; setting.CachePath = "CHBrowser/BrowserCache";//缓存路径 setting.AcceptLanguageList = "zh-CN,zh;q=0.8";//浏览器引擎的语言 setting.LocalesDirPath = "CHBrowser/localeDir";//日志 setting.LogFile = "CHBrowser/LogData";//日志文件 setting.PersistSessionCookies = true;// setting.UserAgent = "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36";//浏览器内核 setting.UserDataPath = "CHBrowser/userData";//个人数据 ///初始化 CefSharp.Cef.Initialize(setting); WebBrowser = new ChromiumWebBrowser("http://www.baidu.com"); //初始页面 WebBrowser.RegisterJsObject("jsObj", new JsEvent(), new CefSharp.BindingOptions() { CamelCaseJavascriptNames = false }); //交互数据 WebBrowser.Dock = DockStyle.Fill;//铺满 WebBrowser.Dock = DockStyle.Fill;//设置停靠方式 this.Controls.Add(WebBrowser);//加入窗体 } private void Form1_Load(object sender, EventArgs e) { } private void button1_Click(object sender, EventArgs e) { WebBrowser.Load(textBox1.Text);//浏览网址 } private async void button2_Click(object sender, EventArgs e) { await WebBrowser.GetBrowser().MainFrame.EvaluateScriptAsync("test_val=" + new Random().Next().ToString("F")); //设置页面上js的test_val变量为随机数 await WebBrowser.GetBrowser().MainFrame.EvaluateScriptAsync("test()");//运行页面上js的test方法 } private async void button3_Click(object sender, EventArgs e) { await WebBrowser.GetBrowser().MainFrame.EvaluateScriptAsync("testArg('123','我是NET' )");//运行页面上js的testArg带参数的方法 } } public class JsEvent { public string MessageText { get; set;} public void ShowTest() { MessageBox.Show("this in C#.\n\r" + MessageText); } public void ShowTestArg(string ss) { MessageBox.Show("收到JS带参数调用\n\r" + ss); } } }
form的构造函数里设置浏览器的基本设置,然后铺满窗口
刷新按钮访问输入框里的网址
js交互按钮运行页面上的js程序
jsEvent为页面上JS交互的接口
接下来我们写个测试的asp页面
新建一个空白ASP项目GoogleTestWeb
新建一个html页面HtmlPage1,代码如下
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script> var test_val; function test() { alert("收到Net程序事件 " + test_val); } function testArg(d1,d2) { alert("收到Net程序事件1 " + d1); alert("收到Net程序事件2 " + d2); } $(function () { $('button:eq(0)').on("click", BtnClick); $('button:eq(1)').on("click", BtnClickArgs); }) function BtnClick() { if (typeof jsObj == "undefined") { alert("jsObj参数未初始化") return; } jsObj.MessageText = "我是js"; jsObj.ShowTest(); } function BtnClickArgs() { if (typeof jsObj == "undefined") { alert("jsObj参数未初始化") return; } jsObj.ShowTestArg($('textarea:eq(0)').val()); } </script> <button style="margin-top:100px">发送给Net程序</button> <button>发送给Net程序带参数</button> <textarea></textarea>
生成项目,此时代码已经写完
接下来就是测试
在HTML页面里右键,点击 在浏览器中查看,VS会打开浏览器,进行html页面
复制网址 我这里是http://localhost:54562/HtmlPage1.html 你们的应该会不同
运行之前的winform程序,把网址复制到textBox上,然后点击刷新,稍等一下就会显示页面
点击 JS交互 (从winform调用js函数)
点击 js交互带参数 (从winform调用js带有参数的函数)
点击 发送给net程序
点击 发送给Net程序带参数 (旁边输入参数)