I am trying to load the contents of a page into webview, a link to AngularJS and Angular content. When I run it when debugging on my computer, it works fine with the Android emulator. But when I install it on my smartphone, it does not work. It would seem that he does not know the JavaScript libraries. Thank you very much for your help.
MainActivity.cs:
protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); // Set our view from the "main" layout resource SetContentView(Resource.Layout.Main); var webView = FindViewById<WebView>(Resource.Id.webView); webView.Settings.JavaScriptEnabled = true; //webView.Settings.CacheMode = CacheModes.Normal; webView.Settings.DomStorageEnabled = true; webView.Settings.SetSupportMultipleWindows(true); webView.Settings.JavaScriptCanOpenWindowsAutomatically = true; webView.Settings.AllowContentAccess = true; webView.Settings.AllowFileAccess = true; webView.Settings.AllowFileAccessFromFileURLs = true; // webView.SetWebChromeClient(new WebChromeClient()); webView.SetWebViewClient(new WebViewClient()); webView.LoadUrl("file:///android_asset/Content/List.html"); }
list.html:
<html> <head> <title>Angular JS Directive</title> <link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css" rel="stylesheet"></link> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"></link> <style type="text/css"> .listdemoListControls md-divider { margin-top: 10px; margin-bottom: 10px; } .listdemoListControls md-list-item > p, .listdemoListControls md-list-item > .md-list-item-inner > p, .listdemoListControls md-list-item .md-list-item-inner > p, .listdemoListControls md-list-item .md-list-item-inner > .md-list-item-inner > p { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script> <script> angular.module('MyForm', ['ngMaterial']) .config(function($mdIconProvider) { $mdIconProvider .iconSet('social', 'img/icons/sets/social-icons.svg', 24) .iconSet('device', 'img/icons/sets/device-icons.svg', 24) .iconSet('communication', 'img/icons/sets/communication-icons.svg', 24) .defaultIconSet('img/icons/sets/core-icons.svg', 24); }) .controller('ListCtrl', function($scope, $mdDialog) { $scope.liststudent= [ { name: 'Kevin', isgirl: false }, { name: 'Sara', isgirl: true}, { name: 'Bob', isgirl: false }, { name: 'Laura', isgirl: true }, { name: 'Peter', isgirl: false } ]; }); </script> </head> <body ng-app="MyForm"> <md-list ng-cloak="" ng-controller="ListCtrl"> <md-subheader class="md-no-sticky">Student list</md-subheader> <md-list-item ng-repeat="topping in liststudent"> {{ topping.name }} <br /> <md-checkbox class="md-secondary" ng-model="topping.isgirl"></md-checkbox> </md-list-item> <md-divider></md-divider> <md-list> </md-list> </md-list> </body> </html>
Screenshot taken on mobile devices:
Screenshot taken on computer:
source share