[CefSharp] 如何在JavaScript中調用C#代碼

本例在WinForms下實現，具體流程與WPF一致。

本例僅供調用示例，不表明正常業務書寫流程。

更新

2019/12/05

打算放上可執行的源碼，博客園好像不能上傳附件。。那麼源碼放在Github上了 https://github.com/CoyoIsLove/example_cefsharp

1. 建立WinForms項目，並將項目屬性設置爲x86平臺

此處預先設置，避免引用時報錯，再花更多的時間去改平臺。

如有其餘需求，可參考官方any cpu解決方案。

2. 首先項目中引用 CefSharp.WinForms

3. 建立一個簡單的HTML文件

<button onclick="c()">點我</button>
<script>
    // 老式注入，無需在頁面執行bind，由於只針對單頁面（Single Page Applications）
    function b() {
        testold.bbb();
    }

    // 新式注入
    CefSharp.BindObjectAsync("testnew");
    function c() {
        testnew.bbb().then((r) => {
            alert(r);
        })
    }
</script>

4. 在默認的Form1.cs下編寫初始化代碼

public partial class Form1 : Form
{
    private ChromiumWebBrowser _chromiumWebBrowser;

    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        var path = Path.Combine(Environment.CurrentDirectory, "HTMLPage1.html");
        _chromiumWebBrowser = new ChromiumWebBrowser(path);
        _chromiumWebBrowser.Dock = DockStyle.Fill;

        // 頁面加載完畢後打開開發者工具
        _chromiumWebBrowser.FrameLoadEnd += (s, eve) =>
        {
            var browser = _chromiumWebBrowser.GetBrowser();
            browser.ShowDevTools();
        };

        OldSinglePage(); // 老版本的注入方式
        NewMutliPage(); // 新版本的注入方式

        this.Controls.Add(_chromiumWebBrowser);
    }

    public void OldSinglePage()
    {
        // 新版本默認爲 false
        CefSharpSettings.LegacyJavascriptBindingEnabled = true;
        // 把 TestClass 注入到單個頁面，名稱爲 test
        _chromiumWebBrowser.RegisterJsObject("testold", new TestClass());
    }

    public void NewMutliPage()
    {
        _chromiumWebBrowser.JavascriptObjectRepository.ResolveObject += (s, eve) =>
        {
            var repo = eve.ObjectRepository;
            if (eve.ObjectName == "testnew")
            {
                repo.Register("testnew", new TestClass(), isAsync: true, options: BindingOptions.DefaultBinder);
            }
        };
    }
}

// 用於注入的類
public class TestClass
{
    public int bbb()
    {
        MessageBox.Show("八八八八");
        return 1;
    }
}

注意，對於文件HTMLPage1.html，我設置了複製到輸出目錄：若是較新則複製。

5. 運行調試，並在開發者工具中測試效果

其餘說明

以目前版本爲準，注入C#類到WEB頁面中的方式有以下2種。

var _chromiumWebBrowser = new ChromiumWebBrowser();
// 反正你先初始化這玩意
// ...

// 1. 舊版本的注入方式，從後端到前端，官方不建議使用
CefSharpSettings.LegacyJavascriptBindingEnabled = true; //首先打開開關（老東西）
_chromiumWebBrowser.RegisterJsObject("testold", new TestClass());

// 2. 新版本的注入方式，從前端到後端，官方推薦，可用於多頁面
_chromiumWebBrowser.JavascriptObjectRepository.ResolveObject += (s, eve) =>
{
    var repo = eve.ObjectRepository;
    if (eve.ObjectName == "testnew") //這個名字對應頁面上 CefSharp.BindObjectAsync 部分
    {
        repo.Register("testnew", new TestClass(), isAsync: true, options: BindingOptions.DefaultBinder);
    }
};

舊版方式操做起來更加簡單，並且頁面上無需操做，可是只能用於單頁面。（先注入再使用）

新版使用起來更簡單，由於不用考慮注入太多的狀況，能夠在頁面上按需註冊。（先請求再注入最後使用）