通过 WebView2 将对象从 .NET 设置为 JavaScript 代码

Question

提前致谢，

我想为包含在网页中的 java 脚本代码设置一个对象。我在 WPF 窗口中显示此网页，该窗口引用名称为“webView”的 WebView2。

我对 WebView2 很陌生，我不确定如何在 WebView2 SDK 的 AddHostObjectToScript() 方法中传递“名称”和“对象”

这是我尝试过的：

[ComVisible(true)]
public class ObjectHandle
{

  public Products(IPriceService priceDetails,IBillService billDetails)
  {  
     PriceDetails = priceDetails;
     BillDetails = billDetails;
  }

  public IPriceService PriceDetails { get; private set; }

  public IBillService  BillDetails { get; private set; }

}

public class WebViewBrowser:Window
{
   public WebViewBrowser()
   {
     InitializeComponent();
     InitializeAsync();
   }

   private void SetScriptingObject
   {
      ObjectHandle objHandle = new ObjectHandle(priceDetails,billDetails);
               
      webView.corewebview2.AddHostObjectToScript("ObjectHandle",objHandle );                                                                            
   }

   async void InitializeAsync()
   {
      await webView.EnsureCoreWebView2Async(null);
   }
}

Answer 1

好问题！我们计划更新我们的 C# 示例应用程序，以展示如何使用 AddHostObjectToScript，因为它并不明显。

您打算与 AddHostObjectToScript 一起使用的类需要使用以下属性进行标记：

[ClassInterface(ClassInterfaceType.AutoDual)]
[ComVisible(true)]
public class Example
{

    // Sample property.
    public string Prop { get; set; } = "example";
}

然后你调用 AddHostObjectToScript 就像你已经在上面使用你的类的一个实例和名称设置为你想从脚本中调用你的对象一样。

webView.CoreWebView2.AddHostObjectToScript("example", new Example());

然后在脚本中您可以通过chrome.webview.hostObjects.{name of host object} 使用该对象：

const example = chrome.webview.hostObjects.example;
const value = await example.Prop;

现在请参阅C++ WebView2 documentation 和sample code，了解如何在脚本中使用投影主机对象。将来我们应该为此添加更好的 .NET 文档。谢谢！