在 Xamarin Forms PCL 中从 Javascript 调用 C# 函数答案

【问题标题】：Calling C# function from Javascript in Xamarin Forms PCL在 Xamarin Forms PCL 中从 Javascript 调用 C# 函数
【发布时间】：2017-04-08 16:44:31
【问题描述】：

我正在使用 Xamarin Forms 在 c# 中开发一个跨平台应用程序。我是 xamarin 的新手。我创建了一个便携式跨平台应用程序。我试图在 webview 中打开本地 html 页面。对于从 javascript 调用 c# 函数，我使用 XAMARIN FORUM 实现了混合 Web 视图。

<ContentPage.Content>
    <local:HybridWebView x:Name="hybridWebView"  Uri="index.html" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
  </ContentPage.Content>

我正在调用 index.html 中的invokeCSharpAction()。

在机器人项目中

 public class HybridWebViewRenderer : ViewRenderer<HybridWebView, Android.Webkit.WebView>
    {
        const string JavaScriptFunction = "function invokeCSharpAction(data){jsBridge.invokeAction(data);}";

        protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
        {
            base.OnElementChanged(e);
            Android.Webkit.WebView.SetWebContentsDebuggingEnabled(true);

            if (Control == null)
            {
                var webView = new Android.Webkit.WebView(Forms.Context);
                webView.Settings.JavaScriptEnabled = true;
                webView.Settings.DomStorageEnabled = true;
                Android.Webkit.WebView.SetWebContentsDebuggingEnabled(true);

                webView.SetWebChromeClient(new WebChromeClient());
                webView.SetWebViewClient(new WebViewClient());
                webView.AddJavascriptInterface(new JSBridge(this), "jsBridge");
                SetNativeControl(webView);
            }
            if (e.OldElement != null)
            {
                Control.RemoveJavascriptInterface("jsBridge");
                var hybridWebView = e.OldElement as HybridWebView;
                hybridWebView.Cleanup();
            }
            if (e.NewElement != null)
            {
                Control.AddJavascriptInterface(new JSBridge(this), "jsBridge");
                Control.LoadUrl(string.Format("file:///android_asset/Content/{0}", Element.Uri));
                InjectJS(JavaScriptFunction);
            }
        }

        void InjectJS(string script)
        {
            if (Control != null)
            {
                Control.LoadUrl(string.Format("javascript: {0}", script));
            }
        }

    }

JSBridge.cs

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

        public JSBridge(HybridWebViewRenderer hybridRenderer)
        {
            hybridWebViewRenderer = new WeakReference<HybridWebViewRenderer>(hybridRenderer);
        }

        [JavascriptInterface]
        [Export("invokeAction")]
        public void InvokeAction(String data)
        {

            HybridWebViewRenderer hybridRenderer;

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

        [JavascriptInterface]
        [Export("invokeDownloadAction")]
        public void invokeDownloadAction(String data)
        {

            HybridWebViewRenderer hybridRenderer;

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

假设我使用 index.html 中的 window.location 导航到 home.html 现在如果我尝试调用相同的 invokeCSharpAction()，在输出窗口中 VS 会说

invokeCSharpAction 未定义

我该如何处理这种情况。我可以为我的混合 webview 设置 OnNavigated 和 OnNavigating 事件吗？

【问题讨论】：

标签： c# webview xamarin.forms portable-class-library hybrid

【解决方案1】：

请参阅此 URL 以获取 Android IOS 和 UWP https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/hybridwebview

您可以轻松解决问题

【讨论】：