Loading jQuery from local assets in Android for a remote html page

Question

I\'m trying to read a local javascript file (jQuery) stored in assets from an Android webview. I do not want to load-with-base-url since my images and html are served remote

Answer 1

First, in your Activity, create the static variable appContext, which holds the Application Context and function below:

 //Initialize Application Context
 private static Context appContext;

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

...and set the variable in onCreate(Bundle savedInstanceState):

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

Second, create class in separate file below:

File: 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;
    }

}

Third, do not forget to initialize your Webview to use JavaScriptInterface:

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

Fourth, call the android method getFileContents() to load the local resources in your HTML with JavaScript:

Note: the local resource in this example is in /assets/js/ sub-folder.