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

Question

提前致谢，

我想将对象设置为包含在网页中的 java 脚本代码。我在 WPF window 中显示此网页，该网页引用名称为 'webView' 的 WebView2。

我是 WebView2 的新手，我不确定如何在 WebView2 SDK 的 AddHostObjectToScript() 方法中传递 'name' 和 'object'

这是我尝试过的：

[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 就像你已经在上面做的那样使用你的 class 的实例并将名称设置为你想从脚本中调用你的对象的任何东西。

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 and sample code 以了解如何在脚本中使用投影的宿主对象。将来我们应该为此添加更好的 .NET 文档。谢谢！

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

Setting an object from .NET to JavaScript code through WebView2

.net

webbrowser-control

webview

chromium

webview2