淡定哥头像

技术文档

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


主界面的代码如下

[csharp] view plain copy
  1. using CefSharp.WinForms;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.ComponentModel;  
  5. using System.Data;  
  6. using System.Drawing;  
  7. using System.Linq;  
  8. using System.Text;  
  9. using System.Threading.Tasks;  
  10. using System.Windows.Forms;  
  11.   
  12. namespace GoogleChromeTest  
  13. {  
  14.     public partial class Form1 : Form  
  15.     {  
  16.         /// <summary>  
  17.         /// Chromium浏览器实例  
  18.         /// </summary>  
  19.         ChromiumWebBrowser WebBrowser;  
  20.   
  21.         public Form1()  
  22.         {  
  23.             InitializeComponent();  
  24.             ///设置  
  25.             var setting = new CefSharp.CefSettings();  
  26.             setting.Locale = "zh-CN";  
  27.             setting.CachePath = "CHBrowser/BrowserCache";//缓存路径  
  28.             setting.AcceptLanguageList = "zh-CN,zh;q=0.8";//浏览器引擎的语言  
  29.             setting.LocalesDirPath = "CHBrowser/localeDir";//日志  
  30.             setting.LogFile = "CHBrowser/LogData";//日志文件  
  31.             setting.PersistSessionCookies = true;//  
  32.             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";//浏览器内核  
  33.             setting.UserDataPath = "CHBrowser/userData";//个人数据  
  34.             ///初始化  
  35.             CefSharp.Cef.Initialize(setting);  
  36.             WebBrowser = new ChromiumWebBrowser("http://www.baidu.com"); //初始页面  
  37.             WebBrowser.RegisterJsObject("jsObj"new JsEvent(), new CefSharp.BindingOptions() { CamelCaseJavascriptNames = false }); //交互数据                                             
  38.             WebBrowser.Dock = DockStyle.Fill;//铺满                                                                    
  39.             WebBrowser.Dock = DockStyle.Fill;//设置停靠方式  
  40.             this.Controls.Add(WebBrowser);//加入窗体  
  41.         }  
  42.   
  43.         private void Form1_Load(object sender, EventArgs e)  
  44.         {  
  45.   
  46.         }  
  47.   
  48.         private void button1_Click(object sender, EventArgs e)  
  49.         {  
  50.             WebBrowser.Load(textBox1.Text);//浏览网址  
  51.         }  
  52.   
  53.         private async void button2_Click(object sender, EventArgs e)  
  54.         {  
  55.             await WebBrowser.GetBrowser().MainFrame.EvaluateScriptAsync("test_val=" + new Random().Next().ToString("F")); //设置页面上js的test_val变量为随机数  
  56.             await WebBrowser.GetBrowser().MainFrame.EvaluateScriptAsync("test()");//运行页面上js的test方法  
  57.   
  58.         }  
  59.   
  60.         private async void button3_Click(object sender, EventArgs e)  
  61.         {  
  62.             await WebBrowser.GetBrowser().MainFrame.EvaluateScriptAsync("testArg('123','我是NET' )");//运行页面上js的testArg带参数的方法  
  63.         }  
  64.     }  
  65.     public class JsEvent  
  66.     {  
  67.         public string MessageText { getset;}  
  68.   
  69.         public void ShowTest()  
  70.         {  
  71.             MessageBox.Show("this in C#.\n\r" + MessageText);  
  72.         }  
  73.         public void ShowTestArg(string ss)  
  74.         {  
  75.             MessageBox.Show("收到JS带参数调用\n\r" + ss);  
  76.         }  
  77.     }  
  78. }  

form的构造函数里设置浏览器的基本设置,然后铺满窗口

刷新按钮访问输入框里的网址

js交互按钮运行页面上的js程序

jsEvent为页面上JS交互的接口

接下来我们写个测试的asp页面

新建一个空白ASP项目GoogleTestWeb

新建一个html页面HtmlPage1,代码如下

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>  
  6.     <meta charset="utf-8" />  
  7.   
  8. </head>  
  9.   
  10. <body>  
  11.     <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  
  12.     <script>  
  13.         var test_val;  
  14.         function test() {  
  15.             alert("收到Net程序事件 " + test_val);  
  16.         }  
  17.         function testArg(d1,d2) {  
  18.             alert("收到Net程序事件1 " + d1);  
  19.             alert("收到Net程序事件2 " + d2);  
  20.         }  
  21.   
  22.         $(function () {  
  23.             $('button:eq(0)').on("click", BtnClick);  
  24.             $('button:eq(1)').on("click", BtnClickArgs);  
  25.         })  
  26.         function BtnClick() {  
  27.             if (typeof jsObj == "undefined") {  
  28.                 alert("jsObj参数未初始化")  
  29.                 return;  
  30.             }  
  31.             jsObj.MessageText = "我是js";  
  32.             jsObj.ShowTest();  
  33.         }  
  34.         function BtnClickArgs() {  
  35.             if (typeof jsObj == "undefined") {  
  36.                 alert("jsObj参数未初始化")  
  37.                 return;  
  38.             }  
  39.             jsObj.ShowTestArg($('textarea:eq(0)').val());  
  40.         }  
  41.     </script>  
  42.   
  43.     <button style="margin-top:100px">发送给Net程序</button>  
  44.     <button >发送给Net程序带参数</button>  
  45.     <textarea></textarea>  
  46. </body>  
  47. </html>  

生成项目,此时代码已经写完

分享到: 

* 发表评论:
Top