Android Webview JavaScript - I riferimenti a script non funziona

Question

Sviluppare su Android 1.0.1 Studio, API 21. In seguito è la struttura delle cartelle -

E 'essenzialmente un AngularJS basato app che voglio avvolgere all'interno di un contenitore WebView e funziona su Android.

Il mio lato Android di codice è -

WebView myWebView = (WebView) findViewById(R.id.webview); 
 
WebSettings webSettings = myWebView.getSettings(); 
 
webSettings.setJavaScriptEnabled(true); 
 
webSettings.setDomStorageEnabled(true); 
 
myWebView.setWebChromeClient(new WebChromeClient()); 
 

 
String filePath = "file:///android_asset/www/index.html"; 
 
myWebView.loadUrl(filePath);

I riferimenti in HTML sono tutti relativi -

<script src="lib/jquery.min.js"></script> 
 
<script src="lib/angular.min.js"></script> 
 
<script src="lib/angular-route.min.js"></script> 
 
<script src="lib/bootstrap.min.js"></script>

Ma È interessante notare che ho cercato la maggior parte dei posti e non sono sicuro di dove sto andando male. Le mie referenze non funzionano affatto! Quindi non posso accedere ai miei file lib, ai miei script, ai miei css. Inoltre, se eseguo una pagina Web angolare esterna all'interno della webview, con lo stesso codice Java, funziona perfettamente!

Qualsiasi aiuto è apprezzato.

Nota: Si prega di non suggerire l'uso di Cordova/PhoneGap. È un requisito del progetto andare nativo (e sinceramente non capisco perché, ma sono solo uno sviluppatore che non ha voce in capitolo).

Nota a margine: Ho riscontrato lo stesso problema con la visualizzazione Web iOS. I riferimenti non funzionano!

---

UPDATE

provato le seguenti cose:

provato loadDataWithBaseURL(), non funziona.

Provato tutti gli scenari possibili per i percorsi. Niente ha funzionato

Rimuovere tutti gli script dalla cartella e inserirli a livello di root e i collegamenti modificati per non avere percorsi, semplicemente nomi di file. Ancora non funziona. E questo è troppo strano.

Answer 1

Dopo un sacco di rovistando, e un sacco di aiuto da parte delle persone che hanno risposto, il colpevole nel mio codice era il tag base. L'ho rimosso e rimosso anche la cosa html5mode. Quindi, per riassumere, ho rimosso il seguente:

<base href="/"> 

e

$locationProvider.html5Mode(true); 

E tutto ha cominciato a lavorare.

Answer 2

Prova a mettere una forwardslash di fronte a "lib" nel percorso delle sorgenti come questo (dal momento che è un parente chiamare il browser completarlo per voi http://domain/lib/jquery.min.js invece di http://domain.comlib/jquery.min.js).

UPDATE - Credo AngularJS utilizza la direttiva ng-src per includere fonti esterne:

<script ng-src="/lib/jquery.min.js"></script> 
<script ng-src="/lib/angular.min.js"></script> 
<script ng-src="/lib/angular-route.min.js"></script> 
<script ng-src="/lib/bootstrap.min.js"></script> 

In alternativa si potrebbe anche completare il percorso da soli se non si ha realmente bisogno il codice per essere dinamico come questo (questo è anche un rapido test per assicurarsi che tutto sia in realtà di lavoro):

<script ng-src="http://domain.com/lib/jquery.min.js"></script> 
<script ng-src="http://domain.com/lib/angular.min.js"></script> 
<script ng-src="http://domain.com/lib/angular-route.min.js"></script> 
<script ng-src="http://domain.com/lib/bootstrap.min.js"></script> 

Answer 3

non ho provato questo, ma mettere la vostra pagina index.html in una stringa e passarla in forma di dati.il baseurl è poi http://domain.com

public void loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl) 

Webview con sia locali che interweb (internet e intranet) risorse. Devi usare loadDataWithBaseURL e tutte le risorse interweb devono essere http: // o tutto l'accesso al file deve essere file: // anche le risorse in qualsiasi parte del web devono essere specificate con http: // che è il i collegamenti e tutto ciò che proviene dal web non può essere //i/image.jpg devono essere http://www.example.com/i/image.jpg. Questo è il web o il file system devono essere completamente qualificati.

Qui di seguito sto utilizzando una directory locale nel file system passando il nome percorso completo di un file (funziona per ottenere una directory) L'html viene inserito in una stringa. Perché sto utilizzando loadDataWithBaseURL Posso anche accedere alla interweb quando è preceduto da http: //

StringBuilder sb = new StringBuilder(); 
       sb.append("<html><body><div style=\"width:100%; text-align:center; font-size:large;\">"); 
       sb.append(kmlmo.markeroptions.getTitle()); 
       sb.append("</div>"); 

       sb.append("<a href = \"http://www.example.com/link.html\">mylink</a>"); 

       sb.append(kmlmo.markeroptions.getSnippet()); 
       sb.append("</body></html>"); 
       View v = getView(); 
       if (v != null) { 
        wv = (WebView) v.findViewById(R.id.webView1); 
        if (wv != null) { 
         String localPath = "file://" + kmlmo.path; 
         String temp = sb.toString(); 
         wv.loadDataWithBaseURL(localPath, temp, "text/html", 
           "UTF-8", ""); 
        } 

Answer 4

sono riuscito a fare qualcosa di simile nel seguente modo:

WebView webView = (WebView) findViewById(R.id.webview); 

WebSettings webSettings = webView.getSettings(); 
webSettings.setJavaScriptEnabled(true); 
webSettings.setDomStorageEnabled(true); 
webView.setWebChromeClient(new WebChromeClient()); 

try { 
    String html = readAssetFile("www/index.html"); 
    webView.loadDataWithBaseURL("file:///android_asset/www/", html, "text/html", "UTF-8", null); 
} catch (IOException e) { 
} 

Dove 'readAssetFile' è:

private String readAssetFile(String fileName) throws IOException { 
    StringBuilder buffer = new StringBuilder(); 
    InputStream fileInputStream = getAssets().open(fileName); 
    BufferedReader bufferReader = new BufferedReader(new InputStreamReader(fileInputStream, "UTF-8")); 
    String str; 

    while ((str=bufferReader.readLine()) != null) { 
     buffer.append(str); 
    } 
    fileInputStream.close(); 

    return buffer.toString(); 
} 

Inoltre, la mia pagina è semplice - solo per testare un'immagine, i angularjs lib e un foglio di stile CSS:

<!DOCTYPE html> 
<html> 

<head> 
<link rel="stylesheet" type="text/css" href="css/mystyle.css"> 
<script src="libs/angular.min.js"></script> 
</head> 

<body> 

<img src="images/IMG_7765.JPG" alt="De nada" width="200" height="300"> 

<div ng-app=""> 

<p>Input something in the input box:</p> 
<p>Name: <input type="text" ng-model="name" value="John"></p> 
<p ng-bind="name"></p> 

</div> 

</body> 
</html> 

Inoltre, la mia struttura dei file è il seguente

Speranza che aiuta :)