CefSharp JavaScript 交互 - 如何在 JavaScript 中调用 ChromiumWebBrowser

要在 JavaScript 中使用 ChromiumWebBrowser 与浏览器进行交互，你可以使用 CefSharp 库。CefSharp 是一个用于在 .NET 应用程序中嵌入 Chromium 浏览器的库。

以下是一个简单的示例，展示如何在 JavaScript 中调用 ChromiumWebBrowser 并与浏览器进行交互：

1. 首先，确保已在项目中引用了 CefSharp 库。你可以通过 NuGet 包管理器来安装 CefSharp。

2. 在你的 HTML 文件中，添加一个按钮和一个显示文本的元素：

<button onclick='callFromBrowser()'>调用浏览器函数</button>
<div id='output'></div>

3. 在你的 JavaScript 文件中，添加一个函数来调用 ChromiumWebBrowser 中的 C# 函数并将结果显示在页面上：

function callFromBrowser() {
  // 调用 C# 函数
  CefSharp.BindObjectAsync('bound').then(function (bound) {
    bound.functionName('参数').then(function (result) {
      // 将结果显示在页面上
      document.getElementById('output').innerText = result;
    });
  });
}

4. 在你的 C# 代码中，创建一个 CefSharp 的 Browser 对象并将其绑定到 JavaScript 上下文中：

using CefSharp;
using CefSharp.WinForms;

public partial class Form1 : Form
{
    private ChromiumWebBrowser browser;

    public Form1()
    {
        InitializeComponent();

        // 创建 Browser 对象
        browser = new ChromiumWebBrowser("about:blank");
        
        // 将 Browser 对象绑定到 JavaScript 上下文中
        browser.JavascriptObjectRepository.Register("bound", new BoundObject(), isAsync: true, options: BindingOptions.DefaultBinder);
        
        // 将 Browser 对象添加到窗体中
        Controls.Add(browser);
        browser.Dock = DockStyle.Fill;
    }
}

public class BoundObject
{
    // 定义一个 C# 函数，供 JavaScript 调用
    public async Task<string> FunctionName(string parameter)
    {
        // 执行一些操作，并返回结果
        return "Hello, " + parameter + "!";
    }
}

这样，当点击页面上的按钮时，JavaScript 中的 callFromBrowser 函数将调用 C# 中的 FunctionName 函数，并将结果显示在页面上的 output 元素中。