Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 75885

WebView internal angular 2 app-created viewrenderer to allow JStoC# call-angular loads,stops working

$
0
0

It seem like it stopped working once I implemented a custom renderer for the webview.

I'm using a WebView to load a local Angular 2 project. Had it working fine previously using Xamarin Forms base WebView code below:

                var baseHref = Path.Combine(DependencyService.Get<IBaseUrl>().Get(), "app/");
        var htmlString = string.Format(@"<!doctype html>

< html>
< head>
< meta charset='utf-8'>

< base href='{0}'>

< meta name='viewport' content='width=device-width, initial-scale=1'>
< link rel='icon' type='image/x-icon' href='favicon.ico'>


< link rel='stylesheet' href='assets/css/bootstrap.min.css'>
< link rel='stylesheet' href='assets/css/font-awesome/css/font-awesome.min.css'>
< link rel='stylesheet' href='assets/css/circle.css'>


< link rel='stylesheet' href='assets/css/global.css'>

< body>
< app-root>Loading...

< !-- JS dependencies -->
< script src='assets/js/jquery.min.js'>
< script src='assets/js/tether.min.js'>
< script src='assets/js/bootstrap.min.js'>
< script src='assets/js/google-charts-loader.js'>
< script src='assets/js/hammer.min.js'>
< script src='assets/js/hammer-time.min.js'>
< script>
// one global variable to keep definitive track of whether Google Charts has been initialized
var googleChartsHaveBeenLoaded = false;

< script type='text/javascript' src='inline.bundle.js'>

", baseHref);

    var htmlSource = new HtmlWebViewSource();
        htmlSource.Html = htmlString;
        var browser = new WebView() { Source = htmlSource, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.FillAndExpand }; // temporarily use this so we can custom-render in iOS

Implemented new webview renderer to allow JS -> C# call via code below:

public class JavascriptWebViewRenderer : ViewRenderer<JavascriptWebView, WKWebView>, IWKScriptMessageHandler
{
    const string JavaScriptFunction = "function invokeCSharpAction(data){window.webkit.messageHandlers.invokeAction.postMessage(data);}";
    WKUserContentController userController;
    EngineModel engineDiagnostics;
    MaintenanceModel maintenanceDiagnostics;

    protected override void OnElementChanged(ElementChangedEventArgs<JavascriptWebView> e)
    {

        base.OnElementChanged(e);

        if (Control == null)
        {
            userController = new WKUserContentController();
            var script = new WKUserScript(new NSString(JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);
            userController.AddUserScript(script);
            userController.AddScriptMessageHandler(this, "invokeAction");

            var config = new WKWebViewConfiguration { UserContentController = userController };
            var webView = new WKWebView(Frame, config);

            string fileName = Path.Combine(NSBundle.MainBundle.BundlePath, string.Format("app/"));
            webView.LoadHtmlString(Element.HtmlString, new NSUrl(fileName, false));


            SetNativeControl(webView);
        }

        if (e.OldElement != null)
        {
            userController.RemoveAllUserScripts();
            userController.RemoveScriptMessageHandler("invokeAction");
            var hybridWebView = e.OldElement as JavascriptWebView;
            hybridWebView.Cleanup();
        }

        if (e.NewElement != null)
        {
            string fileName = Path.Combine(NSBundle.MainBundle.BundlePath, string.Format("app/"));
            Control.LoadHtmlString(Element.HtmlString, new NSUrl(fileName, false));
        }
    }


    public void DidReceiveScriptMessage(WKUserContentController userContentController, WKScriptMessage message)
    {
        Element.InvokeAction(message.Body.ToString());
    }
}

The app fires up and loads the menu but won't load the actual views.

The < router-outlet-container > does not get loaded with content.

This is not an angular issue as it works locally and it also works when not using the custom web view renderer. I'm assuming that there is an issue with the javascript not getting copied or not being available.

I attempted this solution using XLab's HybridWebView and it resulted in the same issue.

Anyone have any ideas what our issue is?


Viewing all articles
Browse latest Browse all 75885

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>