Carica CSS JS dalla cartella Risorse

Ho cercato ore per una soluzione; e anche se ci sono situazioni simili, la mia penso sia un po ‘diversa. Ho un sito Web che sto caricando in webview

setContentView(R.layout.activity_main); WebView myWebView = (WebView) findViewById(webview); myWebView.loadUrl("http://my-website.com/index.php"); WebSettings webSettings = myWebView.getSettings(); webSettings.setJavaScriptEnabled(true); myWebView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) { view.loadUrl(request.toString()); return true; } }); } 

Sta caricando il sito web bene. Senza problemi. Quello che sto cercando di fare (perché ci sono molti file CSS e JS) è caricare questi file dalla cartella delle risorse dell’App Android – sto cercando di far caricare la pagina più velocemente.

      

Attualmente non sta caricando nessuno dei miei file CSS che vengono chiamati in questo modo. Non voglio davvero disturbare nessuno con un semplice problema, mi ha solo infastidito e non sto bene con Java. Inoltre, questa NON è una pagina HTML locale. Questa è una pagina PHP caricata da un server remoto.

Non sono uno sviluppatore mobile, ma sono uno sviluppatore web che ha scritto alcune pagine webview per i miei colleghi sviluppatori mobili.

Per quanto ne so, non sei in grado di accedere al file system in webview. Tuttavia, puoi consentire alla tua app di memorizzare nella cache i file css / js.

 viewer.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT) 

(Questo è da una risposta qui su StackOverflow) (ed ecco il documento sulle impostazioni della cache )

Utilizzando le impostazioni predefinite della cache, i file CSS / JS verranno memorizzati nella cache dopo essere stati scaricati la prima volta, poiché è stato memorizzato nella cache nel normale browser. Quindi puoi semplicemente usare

  

per ottenere il carico di pagina più veloce che desideri.

Se vuoi caricare css e js dalla cartella delle risorse locali, prima devi scaricare la tua pagina web e poi dopo aver bisogno di passare nel browser come segue,

Scarica dati come questo:

 public String getHtmlContent(String urlToLoad) { String outputStr = ""; BufferedReader inputString = null; try { URL urlLoad = new URL(urlToLoad); inputString = new BufferedReader(new InputStreamReader(urlLoad.openStream())); String str; while ((str = inputString.readLine()) != null) { outputStr += str; } } catch (MalformsdURLException e) { } catch (IOException e) { } finally { if (inputString != null) { try { inputString.close(); } catch (IOException e) { e.printStackTrace(); } } } return outputStr; } 

Quindi, dopo aver bisogno di inserire il file js e css all’interno della cartella delle risorse e quindi necessario definire un URL nella pagina web come segue

  

Hai bisogno di impostare tutti gli URL usando come file:///android_asset/ poi dopo il tuo nome css o js,

Dopo tutto finisci devi impostare il contenuto della tua pagina web con la webview come segue

 String webData = getHtmlContent("http://webisteaddress.com/index.html"); mWebView.loadDataWithBaseURL("file:///android_asset/", webData, "text/html", "utf-8", ""); 

Usa questa funzione per caricare CSS e JavaScript nella tua WebView : onCreate() sia CSS che JavaScript all’interno di onCreate() su WebViewClient :

  webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { injectJavaScript(view); injectCSS(); } 

Crea due metodi per iniettare JavaScript e CSS (da res / raw):

  private boolean injectJavaScript(WebView view){ view.loadUrl("javascript:(function() { " + "var head = document.getElementsByTagName('header')[0];" + "head.parentNode.removeChild(head);" + "console.log('true');"+ "})()"); view.loadUrl("javascript:(function() { " + "var footer = document.getElementsByTagName('footer')[0];" + "footer.parentNode.removeChild(footer);" + "})()"); view.loadUrl("javascript:(function() { " + "var nav = document.getElementsByTagName('nav')[0];" + "nav.parentNode.removeChild(nav);" + "})()"); view.loadUrl("javascript:(function() { " + "var set = document.getElementsByClassName('banner');" + "set[0].style.margin = '0px';" + "})()"); return true; } private void injectCSS() { try { InputStream inputStream = getResources().openRawResource(R.raw.css); byte[] buffer = new byte[inputStream.available()]; inputStream.read(buffer); inputStream.close(); String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP); wv1.loadUrl("javascript:(function() {" + "var parent = document.getElementsByTagName('head').item(0);" + "var style = document.createElement('style');" + "style.type = 'text/css';" + "style.innerHTML = window.atob('" + encoded + "');" + "parent.appendChild(style)" + "})()"); } catch (Exception e) { e.printStackTrace(); } } 

Questo ha funzionato per me come un fascino.

Caricamento CSS usando sta per essere deprecato a marzo 2018 . Ho appena ricevuto un messaggio di avviso per questo in Developer Console oggi.

Questo perché niente esegue il rendering sulla pagina fino a quando non è stato caricato tutto il CSS.

Quindi, il suggerimento è che carichiamo il CSS usando JavaScript e abbiamo un piccolo foglio di stile in linea per rendere l’aspetto di base della pagina ; più fogli di stile separati per ogni sezione della pagina, che sono chiamati da piuttosto che da .