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
    {
        /// 

        /// 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程序帶參數 (旁邊輸入參數)