C# Winform 嵌入Google浏览器 Chrome 与JS交互讲解
首先要搭建环境 新建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 
主界面的代码如下 [mw_shl_code=csharp,true]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
{
/// <summary>
/// Chromium浏览器实例
/// </summary>
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("https://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);
}
}
}[/mw_shl_code] form的构造函数里设置浏览器的基本设置,然后铺满窗口 刷新按钮访问输入框里的网址 js交互按钮运行页面上的js程序 jsEvent为页面上JS交互的接口 接下来我们写个测试的asp页面 新建一个空白ASP项目GoogleTestWeb 
新建一个html页面HtmlPage1,代码如下 [mw_shl_code=csharp,true]<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta charset="utf-8">
<script src="https://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>[/mw_shl_code] 生成项目,此时代码已经写完 接下来就是测试 在HTML页面里右键,点击 在浏览器中查看,VS会打开浏览器,进行html页面 
复制网址 我这里是https://localhost:54562/HtmlPage1.html 你们的应该会不同 运行之前的winform程序,把网址复制到textBox上,然后点击刷新,稍等一下就会显示页面 
点击 JS交互 (从winform调用js函数) 
点击 js交互带参数 (从winform调用js带有参数的函数) 
点击 发送给net程序 
点击 发送给Net程序带参数 (旁边输入参数) 文章来自:https://www.2cto.com/kf/201801/713008.html
|