WebView.Eval() is not working in a Custom Renderer Webview

Question

I have followed the xamarin pcl example hybridwebview to invoke C# from JavaScript.

I would like to also implement a function to call JavaScript from C#.

I tried to use webview.Eval(script) on top of the hybridwebview example, however it does not trigger the JavaScript in the webview. I have also tried a webview with no custom render and it works normally.

It is not possible to use Eval in the case of Webview CustomRenderer..?

My CustomerRender:

public class HybridWebView : WebView
{
  Action<string> action;
  public static readonly BindableProperty UriProperty = BindableProperty.Create (
    propertyName: "Uri",
    returnType: typeof(string),
    declaringType: typeof(HybridWebView),
    defaultValue: default(string));

  public string Uri {
    get { return (string)GetValue (UriProperty); }
    set { SetValue (UriProperty, value); }
  }

  public void RegisterAction (Action<string> callback)
  {
    action = callback;
  }

  public void Cleanup ()
  {
    action = null;
  }

  public void InvokeAction (string data)
  {
    if (action == null || data == null) {
      return;
    }
    action.Invoke (data);
  }
}

Calling Eval in ContentPage:

namespace CustomRenderer
{
    public partial class HybridWebViewPage : ContentPage
    {
        public Func<string, Task<string>> EvaluateJavascript { get; set; }

        public HybridWebViewPage ()
        {
            InitializeComponent ();

            hybridWebView.RegisterAction (data => DisplayAlert ("Alert", "Hello " + data, "OK"));
        }

        private void Button_Clicked(object sender, System.EventArgs e)
        {
            var _Script = string.Format("alert('test')");
            hybridWebView.Eval(_Script);
        }
    }
}

Answer 1

Look into the custom renderer and this line

public class HybridWebViewRenderer : ViewRenderer<HybridWebView, Android.Webkit.WebView>

The renderer you used is ViewRenderer not WebViewRenderer,HybridWebView here is not a webview ,it is just a normal view ,so Eval funciton is invalid.

The workaround i think of : use messaging center and execute js in custom renderer

Forms project

private void Button_Clicked(object sender, System.EventArgs e)
    {
        var _Script = string.Format("alert('test')");
        MessagingCenter.Send<object,string>(this,"Hi", _Script);
    }

Custom Renderer

      if (Control == null)
        {
            var webView = new Android.Webkit.WebView(_context);
            webView.Settings.JavaScriptEnabled = true;

            webView.SetWebViewClient(new JavascriptWebViewClient($"javascript: {JavascriptFunction}"));

            ////////////////////////add here 
            webView.SetWebChromeClient(new WebChromeClient());
            MessagingCenter.Subscribe<object, string>(this, "Hi", (obj, arg) =>
            {
                webView.EvaluateJavascript(arg, null);
            });
            ///////////////////////

            SetNativeControl(webView);

        }

My test