JS/.NET 在 MAUI WebView 上交互

Question

我正在将我们的应用程序从 Xamarin 迁移到 MAUI，并且在 Android 和 iOS 上的 WebView 中迁移处理 JS/.NET 交互的代码时遇到了一些困难。让我们重点关注Android。尤其是在 WebView 中从 JS 调用 .NET 代码。

在Xamarin中，我们可以做这样的事情（基本上根据本教程https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview）：

protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
{
    base.OnElementChanged(e);

    if (e.OldElement != null)
    {
        Control.RemoveJavascriptInterface("jsBridge");
    }

    if (e.NewElement != null)
    {
        Control.SetWebViewClient(new JavascriptWebViewClient(this, $"javascript: {JavascriptFunction}"));
        Control.AddJavascriptInterface(new JsBridge(this), "jsBridge");
    }
}

和

public class JavascriptWebViewClient : FormsWebViewClient
{
    private readonly string javascript;

    public JavascriptWebViewClient(HybridWebViewRenderer renderer, string javascript) : base(renderer)
    {
        this.javascript = javascript;
    }

    public override void OnPageFinished(WebView view, string url)
    {
        base.OnPageFinished(view, url);
        view.EvaluateJavascript(javascript, null);
    }
}

在带有 MAUI 的 .NET 6 中，此功能已被弃用。我尝试使用处理程序构建它，但从OnPageFinished未被调用。由于缺乏示例，很难弄清楚我错过了什么。

Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
  {
#if ANDROID
    handler.PlatformView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));
    handler.PlatformView.AddJavascriptInterface(new JsBridge(this), "jsBridge");
#endif
  });

和

public class JavascriptWebViewClient : WebViewClient
{
  private readonly string javascript;

  public JavascriptWebViewClient(string javascript) : base()
  {
    this.javascript = javascript;
  }

  public override void OnPageFinished(WebView view, string url)
  {
    base.OnPageFinished(view, url);
    view.EvaluateJavascript(javascript, null);
  }
}

我应该把这段代码放在哪里？这是正确的方法吗？我缺少什么？我现在将其放入子类 WebView 中，但这可能不是正确的方法。

Answer 1

更新：我为 Windows 开发了一个解决方法。见下文。

TL;DR - https://github.com/nmoschkin/MAUIWebViewExample

我提出了一个适用于 iOS 和 Android 的 MAUI 解决方案，使用新的处理程序模式，如下所述：

将自定义渲染器移植到处理程序

上面的文档有些糟糕，并且没有针对 iOS 版本的实现。我在这里提供。

此调整还使 Source 属性成为BindableProperty。与上面链接中的示例不同，我实际上并未以传统方式将属性添加到平台处理程序中的PropertyMapper 。相反，我们将监听由可绑定属性的属性更改通知方法触发的事件。

此示例实现了 100% 自定义 WebView。如果您想从本机组件移植其他属性和方法，则必须自己添加该附加功能。

共享代码：

在共享代码文件中，您希望通过以下方式实现上述链接中所述的类和接口来创建自定义视图（为我们将提供给消费者的事件提供其他类）：

public class SourceChangedEventArgs : EventArgs
{
    public WebViewSource Source
    {
        get;
        private set;
    }

    public SourceChangedEventArgs(WebViewSource source)
    {
        Source = source;
    }
}

public class JavaScriptActionEventArgs : EventArgs
{
    public string Payload { get; private set; }

    public JavaScriptActionEventArgs(string payload)
    {
        Payload = payload;
    }
}

public interface IHybridWebView : IView
{
    event EventHandler<SourceChangedEventArgs> SourceChanged;
    event EventHandler<JavaScriptActionEventArgs> JavaScriptAction;
    
    void Refresh();

    WebViewSource Source { get; set; }

    void Cleanup();

    void InvokeAction(string data);

}
    

public class HybridWebView : View, IHybridWebView
{
    public event EventHandler<SourceChangedEventArgs> SourceChanged;
    public event EventHandler<JavaScriptActionEventArgs> JavaScriptAction;

    public HybridWebView()
    {

    }

    public void Refresh()
    {
        if (Source == null) return;
        var s = Source;
        Source = null;
        Source = s;
    }

    public WebViewSource Source
    {
        get { return (WebViewSource)GetValue(SourceProperty); }
        set { SetValue(SourceProperty, value); }
    }

    public static readonly BindableProperty SourceProperty = BindableProperty.Create(
      propertyName: "Source",
      returnType: typeof(WebViewSource),
      declaringType: typeof(HybridWebView),
      defaultValue: new UrlWebViewSource() { Url = "about:blank" },
      propertyChanged: OnSourceChanged);

    private static void OnSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var view = bindable as HybridWebView;

        bindable.Dispatcher.Dispatch(() =>
        {
            view.SourceChanged?.Invoke(view, new SourceChangedEventArgs(newValue as WebViewSource));

        });
    }

    public void Cleanup()
    {
        JavaScriptAction = null;
    }

    public void InvokeAction(string data)
    {
        JavaScriptAction?.Invoke(this, new JavaScriptActionEventArgs(data));
    }
}

然后您必须为每个平台声明处理程序，如下所示：

安卓实现：

public class HybridWebViewHandler : ViewHandler<IHybridWebView, Android.Webkit.WebView>
{
    public static PropertyMapper<IHybridWebView, HybridWebViewHandler> HybridWebViewMapper = new PropertyMapper<IHybridWebView, HybridWebViewHandler>(ViewHandler.ViewMapper);

    const string JavascriptFunction = "function invokeCSharpAction(data){jsBridge.invokeAction(data);}";

    private JSBridge jsBridgeHandler;

    public HybridWebViewHandler() : base(HybridWebViewMapper)
    {
    }

    private void VirtualView_SourceChanged(object sender, SourceChangedEventArgs e)
    {
        LoadSource(e.Source, PlatformView);
    }

    protected override Android.Webkit.WebView CreatePlatformView()
    {
        var webView = new Android.Webkit.WebView(Context);
        jsBridgeHandler = new JSBridge(this);

        webView.Settings.JavaScriptEnabled = true;

        webView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));
        webView.AddJavascriptInterface(jsBridgeHandler, "jsBridge");

        return webView;
    }

    protected override void ConnectHandler(Android.Webkit.WebView platformView)
    {
        base.ConnectHandler(platformView);

        if (VirtualView.Source != null)
        {
            LoadSource(VirtualView.Source, PlatformView);
        }

        VirtualView.SourceChanged += VirtualView_SourceChanged;
    }

    protected override void DisconnectHandler(Android.Webkit.WebView platformView)
    {
        base.DisconnectHandler(platformView);

        VirtualView.SourceChanged -= VirtualView_SourceChanged;
        VirtualView.Cleanup();

        jsBridgeHandler?.Dispose();
        jsBridgeHandler = null;
    }

    private static void LoadSource(WebViewSource source, Android.Webkit.WebView control)
    {
        try
        {
            if (source is HtmlWebViewSource html)
            {
                control.LoadDataWithBaseURL(html.BaseUrl, html.Html, null, "charset=UTF-8", null);
            }
            else if (source is UrlWebViewSource url)
            {
                control.LoadUrl(url.Url);
            }
        }
        catch { }
    }
}

public class JavascriptWebViewClient : WebViewClient
{
    string _javascript;

    public JavascriptWebViewClient(string javascript)
    {
        _javascript = javascript;
    }

    public override void OnPageStarted(Android.Webkit.WebView view, string url, Bitmap favicon)
    {
        base.OnPageStarted(view, url, favicon);
        view.EvaluateJavascript(_javascript, null);
    }
}

public class JSBridge : Java.Lang.Object
{
    readonly WeakReference<HybridWebViewHandler> hybridWebViewRenderer;

    internal JSBridge(HybridWebViewHandler hybridRenderer)
    {
        hybridWebViewRenderer = new WeakReference<HybridWebViewHandler>(hybridRenderer);
    }

    [JavascriptInterface]
    [Export("invokeAction")]
    public void InvokeAction(string data)
    {
        HybridWebViewHandler hybridRenderer;

        if (hybridWebViewRenderer != null && hybridWebViewRenderer.TryGetTarget(out hybridRenderer))
        {
            hybridRenderer.VirtualView.InvokeAction(data);
        }
    }
}

iOS 实现：

public class HybridWebViewHandler : ViewHandler<IHybridWebView, WKWebView>
{
    public static PropertyMapper<IHybridWebView, HybridWebViewHandler> HybridWebViewMapper = new PropertyMapper<IHybridWebView, HybridWebViewHandler>(ViewHandler.ViewMapper);

    const string JavaScriptFunction = "function invokeCSharpAction(data){window.webkit.messageHandlers.invokeAction.postMessage(data);}";

    private WKUserContentController userController;
    private JSBridge jsBridgeHandler;

    public HybridWebViewHandler() : base(HybridWebViewMapper)
    {
    }

    private void VirtualView_SourceChanged(object sender, SourceChangedEventArgs e)
    {
        LoadSource(e.Source, PlatformView);
    }

    protected override WKWebView CreatePlatformView()
    {

        jsBridgeHandler = new JSBridge(this);
        userController = new WKUserContentController();

        var script = new WKUserScript(new NSString(JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);

        userController.AddUserScript(script);
        userController.AddScriptMessageHandler(jsBridgeHandler, "invokeAction");

        var config = new WKWebViewConfiguration { UserContentController = userController };
        var webView = new WKWebView(CGRect.Empty, config);

        return webView;            
    }

    protected override void ConnectHandler(WKWebView platformView)
    {
        base.ConnectHandler(platformView);

        if (VirtualView.Source != null)
        {
            LoadSource(VirtualView.Source, PlatformView);
        }

        VirtualView.SourceChanged += VirtualView_SourceChanged;
    }

    protected override void DisconnectHandler(WKWebView platformView)
    {
        base.DisconnectHandler(platformView);

        VirtualView.SourceChanged -= VirtualView_SourceChanged;

        userController.RemoveAllUserScripts();
        userController.RemoveScriptMessageHandler("invokeAction");
    
        jsBridgeHandler?.Dispose();
        jsBridgeHandler = null;
    }


    private static void LoadSource(WebViewSource source, WKWebView control)
    {
        if (source is HtmlWebViewSource html)
        {
            control.LoadHtmlString(html.Html, new NSUrl(html.BaseUrl ?? "http://localhost", true));
        }
        else if (source is UrlWebViewSource url)
        {
            control.LoadRequest(new NSUrlRequest(new NSUrl(url.Url)));
        }

    }

}

public class JSBridge : NSObject, IWKScriptMessageHandler
{
    readonly WeakReference<HybridWebViewHandler> hybridWebViewRenderer;

    internal JSBridge(HybridWebViewHandler hybridRenderer)
    {
        hybridWebViewRenderer = new WeakReference<HybridWebViewHandler>(hybridRenderer);
    }

    public void DidReceiveScriptMessage(WKUserContentController userContentController, WKScriptMessage message)
    {
        HybridWebViewHandler hybridRenderer;

        if (hybridWebViewRenderer.TryGetTarget(out hybridRenderer))
        {
            hybridRenderer.VirtualView?.InvokeAction(message.Body.ToString());
        }
    }
}

如您所见，我正在侦听更改源的事件，然后该事件将执行更改源所需的特定于平台的步骤。

另请注意，在JSBridge的两种实现中，我都使用Wea​​kReference来跟踪控件。我不确定处置是否会陷入僵局，但我这样做是出于非常谨慎的考虑。

Windows 实现：

所以。根据我阅读的各种文章，MAUI 的 WebView2 当前 WinUI3 迭代尚不允许我们调用AddHostObjectToScript。他们计划在未来的版本中使用此功能。

但是，后来我想起那是 Windows，所以我创建了一个解决方法，它肯定可以模拟相同的行为并实现相同的结果，但使用了一个有点非正统的解决方案：使用HttpListener。

internal class HybridSocket
{
    private HttpListener listener;
    private HybridWebViewHandler handler;
    bool token = false;
    
    public HybridSocket(HybridWebViewHandler handler)
    {
        this.handler = handler;
        CreateSocket();
    }

    private void CreateSocket()
    {
        listener = new HttpListener();
        listener.Prefixes.Add("http://localhost:32000/");
    }

    public void StopListening()
    {
        token = false;
    }

    private void SendToNative(string json)
    {
        handler.VirtualView.InvokeAction(json);
    }

    public void Listen()
    {
        var s = listener;
        try
        {
            token = true;
            s.Start();
            
            while (token)
            {                
                HttpListenerContext ctx = listener.GetContext();                
                using HttpListenerResponse resp = ctx.Response;

                    resp.AddHeader("Access-Control-Allow-Origin", "null");
                    resp.AddHeader("Access-Control-Allow-Headers", "content-type");

                    var req = ctx.Request;

                    Stream body = req.InputStream;
                    Encoding encoding = req.ContentEncoding;

                    using (StreamReader reader = new StreamReader(body, encoding))
                    {
                        var json = reader.ReadToEnd();

                        if (ctx.Request.HttpMethod == "POST")
                        {
                            SendToNative(json);
                        }
                    }

                resp.StatusCode = (int)HttpStatusCode.OK;
                resp.StatusDescription = "Status OK";
            }
                       
            CreateSocket();
        }
        catch (Exception e)
        {
            Console.WriteLine(e.ToString());
        }
    }
}

public class HybridWebViewHandler : ViewHandler<IHybridWebView, WebView2>
{
    public static PropertyMapper<IHybridWebView, HybridWebViewHandler> HybridWebViewMapper = new PropertyMapper<IHybridWebView, HybridWebViewHandler>(ViewHandler.ViewMapper);

    const string JavascriptFunction = @"function invokeCSharpAction(data)
                {
                    var http = new XMLHttpRequest();
                    var url = 'http://localhost:32000';
                    http.open('POST', url, true);
                    http.setRequestHeader('Content-type', 'application/json');
                    http.send(JSON.stringify(data));
                }";

    static SynchronizationContext sync;
    private HybridSocket jssocket;

    public HybridWebViewHandler() : base(HybridWebViewMapper)
    {
        sync = SynchronizationContext.Current;
        jssocket = new HybridSocket(this);

        Task.Run(() => jssocket.Listen());
    }

    ~HybridWebViewHandler()
    {
        jssocket.StopListening();
    }

    private void OnWebSourceChanged(object sender, SourceChangedEventArgs e)
    {
        LoadSource(e.Source, PlatformView);
    }

    protected override WebView2 CreatePlatformView()
    { 
        sync = sync ?? SynchronizationContext.Current;
        var webView = new WebView2();

        webView.NavigationCompleted += WebView_NavigationCompleted;

       
        return webView;
    }

    private void WebView_NavigationCompleted(WebView2 sender, CoreWebView2NavigationCompletedEventArgs args)
    {
        var req = new EvaluateJavaScriptAsyncRequest(JavascriptFunction);
        PlatformView.EvaluateJavaScript(req);
    }

    protected override void ConnectHandler(WebView2 platformView)
    {
        base.ConnectHandler(platformView);

        if (VirtualView.Source != null)
        {
            LoadSource(VirtualView.Source, PlatformView);
        }

        VirtualView.SourceChanged += OnWebSourceChanged;
    }

    protected override void DisconnectHandler(WebView2 platformView)
    {
        base.DisconnectHandler(platformView);

        VirtualView.SourceChanged -= OnWebSourceChanged;
        VirtualView.Cleanup();
    }

    private static void LoadSource(WebViewSource source, WebView2 control)
    {
        try
        {
            if (control.CoreWebView2 == null)
            {
                control.EnsureCoreWebView2Async().AsTask().ContinueWith((t) =>
                {
                    sync.Post((o) => LoadSource(source, control), null);
                });
            }
            else
            {
                if (source is HtmlWebViewSource html)
                {
                    control.CoreWebView2.NavigateToString(html.Html);
                }
                else if (source is UrlWebViewSource url)
                {
                    control.CoreWebView2.Navigate(url.Url);
                }
            }
        }
        catch { }
    }
}

最后，您需要通过将ConfigureMauiHandlers添加到应用程序构建器来初始化MAUI应用程序：

在 MauiProgram.cs 中初始化 MAUI 应用程序

public static MauiApp CreateMauiApp()
{

    var builder = MauiApp.CreateBuilder();

    builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        })
        .ConfigureMauiHandlers(handlers =>
        {
            handlers.AddHandler(typeof(HybridWebView), typeof(HybridWebViewHandler));
        });


    return builder.Build();
}

将控件添加到 XAML

<controls:HybridWebView
            x:Name="MyWebView"
            HeightRequest="128"
            HorizontalOptions="Fill"
            Source="{Binding Source}"
            VerticalOptions="FillAndExpand"
            WidthRequest="512"
            />

最后，我将上述所有内容添加到 GitHub 存储库中的完整示例 MAUI 项目中：

https://github.com/nmoschkin/MAUIWebViewExample

GitHub 存储库示例还包括一个 ViewModel，其中包含控件在标记中绑定到的WebViewSource 。

Answer 2

好吧，想通了。为那些寻求相同问题的人添加信息。

你需要做什么：

1. 覆盖 WebView 客户端。

通用的：

public partial class CustomWebView : WebView
{
    partial void ChangedHandler(object sender);
    partial void ChangingHandler(object sender, HandlerChangingEventArgs e);

    protected override void OnHandlerChanging(HandlerChangingEventArgs args)
    {
        base.OnHandlerChanging(args);
        ChangingHandler(this, args);
    }

    protected override void OnHandlerChanged()
    {
        base.OnHandlerChanged();
        ChangedHandler(this);
    }

    public void InvokeAction(string data)
    {
        // your custom code
    }
}

安卓：

public partial class CustomWebView
{
    const string JavascriptFunction = "function invokeActionInCS(data){jsBridge.invokeAction(data);}";

    partial void ChangedHandler(object sender)
    {
        if (sender is not WebView { Handler: { PlatformView: Android.Webkit.WebView nativeWebView } }) return;

        nativeWebView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));
        nativeWebView.AddJavascriptInterface(new JsBridge(this), "jsBridge");
    }

    partial void ChangingHandler(object sender, HandlerChangingEventArgs e)
    {
        if (e.OldHandler != null)
        {
            if (sender is not WebView { Handler: { PlatformView: Android.Webkit.WebView nativeWebView } }) return;
            nativeWebView.RemoveJavascriptInterface("jsBridge");
        }
    }
}

2. 将此自定义视图添加到您的 XAML

<views:CustomWebView x:Name="CustomWebViewName"/>

3. 修改JS桥

public class JsBridge : Java.Lang.Object
    {
        private readonly HarmonyWebView webView;

        public JsBridge(HarmonyWebView webView)
        {
            this.webView = webView;
        }

        [JavascriptInterface]
        [Export("invokeAction")]
        public void InvokeAction(string data)
        {
            webView.InvokeAction(data);
        }
    }