如何在Xamarin中调用JavaScript方法？

我来帮你搞定在Xamarin中调用JavaScript方法的需求～

你提到的HybridKit确实只支持JavaScript调用C#函数的场景，没法直接实现C#主动调用JS的功能。不过针对Xamarin.Forms，我们可以通过自定义渲染器来完美解决这个问题，下面是一步步的实现方案：

1. 定义共享项目的自定义WebView控件 #

首先在Xamarin.Forms的共享项目里，创建一个继承自WebView的自定义控件，添加触发JS调用的方法和事件：

public class HybridWebView : WebView
{
    public event EventHandler<string> EvaluateJavaScriptRequested;

    // 供外部调用的方法，触发JS执行请求
    public void EvaluateJavaScript(string script)
    {
        EvaluateJavaScriptRequested?.Invoke(this, script);
    }
}

2. Android平台的自定义渲染器实现 #

在Android项目中创建渲染器，通过Android原生的WebView实例来执行JS代码：

[assembly: ExportRenderer(typeof(HybridWebView), typeof(HybridWebViewRenderer))]
namespace YourAppNamespace.Droid
{
    public class HybridWebViewRenderer : WebViewRenderer
    {
        public HybridWebViewRenderer(Context context) : base(context) { }

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

            if (e.NewElement != null)
            {
                ((HybridWebView)e.NewElement).EvaluateJavaScriptRequested += OnEvaluateJS;
            }
            if (e.OldElement != null)
            {
                ((HybridWebView)e.OldElement).EvaluateJavaScriptRequested -= OnEvaluateJS;
            }
        }

        private void OnEvaluateJS(object sender, string script)
        {
            Control?.EvaluateJavascript(script, null);
        }
    }
}

3. iOS平台的自定义渲染器实现 #

在iOS项目中，用WKWebView（推荐，比旧版UIWebView性能更好）来执行JS：

[assembly: ExportRenderer(typeof(HybridWebView), typeof(HybridWebViewRenderer))]
namespace YourAppNamespace.iOS
{
    public class HybridWebViewRenderer : WkWebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                ((HybridWebView)e.NewElement).EvaluateJavaScriptRequested += OnEvaluateJS;
            }
            if (e.OldElement != null)
            {
                ((HybridWebView)e.OldElement).EvaluateJavaScriptRequested -= OnEvaluateJS;
            }
        }

        private void OnEvaluateJS(object sender, string script)
        {
            WebView?.EvaluateJavaScript(script, (result, error) =>
            {
                // 可选：处理JS执行的结果或错误
                if (error != null)
                {
                    Console.WriteLine($"JS执行出错: {error.LocalizedDescription}");
                }
            });
        }
    }
}

4. 在页面中使用并调用JS方法 #

最后在Xamarin.Forms的页面里，实例化自定义的HybridWebView，等页面加载完成后就可以调用JS方法了：

public class MainPage : ContentPage
{
    public MainPage()
    {
        var hybridWebView = new HybridWebView
        {
            Source = new UrlWebViewSource { Url = "你的网页地址" }
        };

        // 网页加载完成后调用JS方法
        hybridWebView.Navigated += (s, e) =>
        {
            // 示例：调用网页中的sayHello方法，传入参数"Xamarin"
            hybridWebView.EvaluateJavaScript("sayHello('Xamarin')");
        };

        Content = hybridWebView;
    }
}

这样就能顺利从C#代码中调用网页里的JavaScript方法啦。

内容的提问来源于stack exchange，提问作者Kamerel