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

Posted 2023-02-15

【中文标题】通过 WebView2 将对象从 .NET 设置为 JavaScript 代码

【英文标题】：Setting an object from .NET to JavaScript code through WebView2

【发布时间】：2020-10-28 20:28:34

【问题描述】：

提前致谢，

我想为包含在网页中的 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);
   

【参考方案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 文档。谢谢！

【讨论】：

感谢@David Risney。我可以使用上述方法将 COM 对象传递给 javascript！

我试过这个方法const example = chrome.webview.hostObjects.example; 它工作了一段时间，但后来停止工作。一个理论说它必须与 JavaScript 垃圾收集有关，但我发现如果我直接使用 const value = await chrome.webview.hostObjects.example.Prop 而不是 const value = await example.Prop; 则没有问题。