Cargando jQuery desde activos locales en Android para una página html remota

Estoy tratando de leer un archivo javascript local (jQuery) almacenado en los activos de una webview de Android. No quiero cargar con base-url ya que mis imágenes y html se sirven de forma remota.

Para resumir: – Carga jQuery local (en la carpeta de activos) en una página cargada remotamente en la vista web de Android.

Después de largas horas de navegación en vano, decidí poner esta pregunta aquí. Por favor ayuda.

¡Gracias!

  1. Defina una interfaz de Javascript como la siguiente que leerá su archivo jquery desde el directorio de activos

    class JavaScriptInterface { @JavascriptInterface public String getFileContents(){ return readAssetsContent("jquery.js"); } } 
  2. Actualizar WebView para habilitar JavaScript y agregar JavaScriptInterface definido anteriormente …

     webView.getSettings().setJavaScriptEnabled(true); webView.addJavascriptInterface(new JavaScriptInterface(), "android"); 
  3. Agregue un fragmento de código javascript en su HTML remoto para leer el contenido del archivo jquery a través de la …

     <script type="text/javascript"> var s = document.createElement('script'); s.innerHTML = window.android.getFileContents(); document.head.appendChild(s); //check if jquery is loaded now... if(typeof $ != "undefined") { $(document).ready(function() { $('body').css('background','green'); }); } else { document.body.innerText = "jQuery NOT loaded"; } </script> 

Primero , en su Actividad, cree la variable estática appContext , que contiene el Contexto y la Función de la Aplicación a continuación:

  //Initialize Application Context private static Context appContext; //Get Application Context (for use in external functions) public static Context getContext() { return appContext; } 

… y establecer la variable en onCreate(Bundle savedInstanceState) :

  //Set application context (for use in external functions) appContext = this; 

En segundo lugar , crear la clase en un archivo separado a continuación:

Archivo: JavaScriptInterface.java

 import android.content.Context; import android.util.Log; import android.webkit.JavascriptInterface; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; class JavaScriptInterface { @JavascriptInterface public String getFileContents(String assetName){ return readAssetsContent(MainActivity.getContext(), assetName); } //Read resources from "assets" folder in string public String readAssetsContent(Context context, String name) { BufferedReader in = null; try { StringBuilder buf = new StringBuilder(); InputStream is = context.getAssets().open(name); in = new BufferedReader(new InputStreamReader(is)); String str; boolean isFirst = true; while ( (str = in.readLine()) != null ) { if (isFirst) isFirst = false; else buf.append('\n'); buf.append(str); } return buf.toString(); } catch (IOException e) { Log.e("error", "Error opening asset " + name); } finally { if (in != null) { try { in.close(); } catch (IOException e) { Log.e("error", "Error closing asset " + name); } } } return null; } } 

En tercer lugar , no olvide inicializar su Webview para usar JavaScriptInterface:

  //Set JS interface from JS/HTML code execution mWebView.addJavascriptInterface(new JavaScriptInterface(), "android"); 

En cuarto lugar , llame al método android getFileContents() para cargar los recursos locales en su código HTML con JavaScript:

  <script type="text/javascript"> var s = document.createElement('script'); s.innerHTML = window.android.getFileContents('js/jquery.min.js'); document.head.appendChild(s); //check if jquery is loaded now... if(typeof $ != "undefined") { $(document).ready(function() { alert("jQuery is loaded!"); }); } else { alert("jQuery is NOT loaded!"); } </script> 

Nota: el recurso local en este ejemplo está en /assets/js/ sub-folder.

En mi página html he añadido una etiqueta como esta.

 <script type="text/javascript" src="file:///android_asset/jquery.js"></script> <script type="text/javascript" src="file:///android_asset/englArrIni.js"></script> <script type="text/javascript" src="file:///android_asset/point.js"></script> <script type="text/javascript" src="file:///android_asset/dataManager.js"></script> 

Cuando se carga url que cargará automáticamente todos los archivos js. Creo que esto te ayuda.

  • ¿Cómo se puede pasar JSON a AngularJS en la vista web de Android?
  • ¿Qué es más seguro: navegador externo o ChromeTab para autorización?
  • alerta en la vista web incorporada
  • Que puede reemplazar la función capturePicture
  • Retofit2 error java.io.EOFException: Fin de la entrada en la línea 1 columna 1
  • Mostrar una ubicación geográfica mediante webview
  • Tratando de conectar la aplicación de Android a .NET ".svc" webservice y el servidor responde Tipo de soporte no compatible
  • API de Android 23. WebView cómo ignorar errores de JavaScript
  • Android habilita el botón Atrás en la vista web
  • Android: ZoomPicker se rompe enTouchListener
  • ¿Cómo generar enlace waze meetup con fallback web?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.