通过 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 文档和示例代码，了解如何在脚本中使用投影的主机对象。将来我们应该为此添加更好的 .NET 文档。谢谢！