从嵌入式 Cefsharp 浏览器调用 WinForm 过程

Question

我正在创建一个 WinForm 应用程序，其中包含一个嵌入式浏览器，它借助 Leaflet 框架显示 OSM 地图。在 WinForm 端有图表，必须根据用户在 OSM 地图上选择的标记进行更新。只要我在 Visual Studio 中使用原生浏览器，浏览器和 winform 的交互就运行良好。但由于 IE 中大量标记的渲染效果不佳，我不得不在 Cefsharp 的帮助下切换到 Chromium。

我使用的 Cefsharp 版本是 3.3239.1723.g071d1c1。部署浏览器没有任何问题（ChrisKent 教程帮助很大 - link）。

我面临的主要问题是如何在 Cefsharp/Chromium 浏览器中从 JS 调用 Winform 过程。

在 VS 中使用本机浏览器控件时，这可以很容易地完成，但我想在 Cefsharp 中方法完全不同。我在网上阅读文档和一些可用的问题，但我找不到我的答案。可能我需要根据文档向 JavaScript 公开一个 .NET 类。老实说，我不明白该怎么做。最重要的是，我正在使用 Visual Basic。

任何帮助将不胜感激。下面我可以非常简化地展示我需要的东西。 JavaScript onClick 事件应该触发 WinForms HelloWorld() 过程的执行。

//JavaScript side
<script>
    function onClick(e) {
       //How to Call Winform sub HelloWorld?
       //with native browser this is done with "window.external.HelloWorld();"
    };

WinForm 如下所示：

Imports CefSharp.WinForms
Imports CefSharp

Public Class Form1

Private WithEvents browser As ChromiumWebBrowser

Public Sub New()
    InitializeComponent()

    Dim settings As New CefSettings()
    CefSharp.Cef.Initialize(settings)

    browser = New ChromiumWebBrowser("http://localhost") With {
    .Dock = DockStyle.Fill
    }
    panBrowser.Controls.Add(browser)

End Sub

Private Sub HelloWorld()

    MsgBox("Hello World")

End Sub

End Class

提前谢谢你！

Answer 1

在 amaitland 在 cmets 中指出我在最新版本的 Cefsharp 中有一种新的绑定方法之后，我进行了一些额外的研究并找到了解决我的问题的方法。下面是从嵌入式 Cefsharp 浏览器中运行的 JavaScript 调用 VB 过程“showMessage”的代码。此过程将从 JS 传递的字符串值写入 Winform 中的 TextBox。希望这对某人有所帮助。

JavaScript 端

function onClick(e) {

    var popup = e.target.getPopup();
    var content = popup.getContent();

    // calling starts here
    (async function() {
    await CefSharp.BindObjectAsync("boundAsync", "bound");
    // "showMessage" is the VB procedure to call in a class "boundAsync"
    boundAsync.showMessage(content);
})();
    // calling ends here

};

VB端

Imports CefSharp.WinForms
Imports CefSharp

Public Class Form1

Private WithEvents browser As ChromiumWebBrowser

// row below is needed for communication between the new class and Form1
Friend Shared MyInstance As Form1

    Public Sub New()
        InitializeComponent()

        Dim settings As New CefSettings()
        CefSharp.Cef.Initialize(settings)

        browser = New ChromiumWebBrowser("localhost") With {
        .Dock = DockStyle.Fill
        }

        panBrowser.Controls.Add(browser)
        // add this line for registering a new class boundAsync
        browser.JavascriptObjectRepository.Register("boundAsync", New BoundObject(), True)

    End Sub

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        // row below is needed for communication between the new class and Form1
        MyInstance = Me

    End Sub

End Class

// declare the new class
Public Class BoundObject

    // declare the procedure called by JS
    // in this example a value passed from JS is assigned to a TextBox1 on Form1
    Public Sub showMessage(ByVal msg As String)

        If (Form1.MyInstance IsNot Nothing) AndAlso Not Form1.MyInstance.IsDisposed Then

            If Form1.MyInstance.TextBox1.InvokeRequired Then
                Form1.MyInstance.TextBox1.Invoke(New Action(Of String)(AddressOf showMessage), msg)
            Else
                Form1.MyInstance.TextBox1.Text = msg
            End If

        End If

    End Sub
End Class