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
主介面的程式碼如下
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("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,程式碼如下
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> </head> <body> <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> </body> </html>
生成專案,此時程式碼已經寫完
接下來就是測試
在HTML頁面裡右鍵,點選 在瀏覽器中檢視,VS會開啟瀏覽器,進行html頁面
複製網址 我這裡是 http://localhost:54562/HtmlPage1.html 你們的應該會不同
執行之前的winform程式,把網址複製到textBox上,然後點選重新整理,稍等一下就會顯示頁面
點選 JS互動 (從winform呼叫js函式)
點選 js互動帶引數 (從winform呼叫js帶有引數的函式)
點選 傳送給net程式
點選 傳送給Net程式帶引數 (旁邊輸入引數)
程式碼下載: 下載地址
(NuGet包需要下載)