Android: how to load local javascript file to WebView

Question

I am trying to write a program which does a simple toast. When I tried adding the script within the HTML, it worked and am able to see the toast. But when I placed the same script code in separate file under assert folder(script.js), it fails to inject the javascript.

I am supporting API 15 and above.

Here is the code, where I trying to inject the script.

    myWebView = (WebView) findViewById(R.id.webviewid);

    myWebView.loadDataWithBaseURL("file:///android_asset/",
            "<html>" +
            "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">" +
            "<style type=\"text/css\">\n" +
            "@font-face {\n" +
            "    font-family: MyFont;\n" +
            "    src: url(\"file:///android_asset/fonts/myfont.ttf\")\n" +
            "}\n" +
            "body {\n" +
            "    font-family: MyFont;\n" +
            "    font-size: medium;\n" +
            "    text-align: justify;\n" +
            "}\n" +
            "</style>" +
            "</head>" +
            "<body>" +
            "<input type=\"button\" value=\"Say hello\" onClick=\"showAndroidToast('Hello Android!')\" />" +
            "<script type=\"text/javascript\" src=\"file:///android_asset/www/js/script.js\"/>" +
            "</body>" +
            "</html>", "text/html", "UTF-8", null);
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
    myWebView.setWebViewClient(new MyWebViewClient());

Here is my javascript code. (script.js)

    function showAndroidToast(toast) {
        Android.showToast(toast);
    };

Here is my Javascript Interface:

    protected class WebAppInterface {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c) {
            mContext = c;
        }

        /** Show a toast from the web page */
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }

How can I inject javascript file? Any help is appreciated.

My Project structure is like this:

    ---
      |
      ---- App
           |
           -----src
                |
                -----main
                     |
                     ------asserts
                     |     |
                     |     ------fonts
                     |     |
                     |     ------www
                     |     |     |
                     |     |     ------js
                     |     |           |
                     |     |           ------script.js
                     |
                     ------java
                     |
                     ------res

The cat log shows:

 E/Web Console﹕ Uncaught ReferenceError: showAndroidToast is not defined:13

score 0 · Answer 1 · answered Sep 24 '14 at 13:46

0

Since you are using a WebView to display the data, you could upload it to a server or even Dropbox and then connect it with a url import?

answered Sep 24 '14 at 13:46

Dogy Vogey

19
4

That's the worst case... But I am trying to inject script, which works with internet connection. – User12111111 Sep 24 '14 at 13:50
Are you checking that the system is getting the script back and not returning it blank or that it cannot find it in the source folder – Dogy Vogey Sep 24 '14 at 13:52
That's what, its not loading the script – User12111111 Sep 24 '14 at 13:53
Try putting it in your "fonts" folder and linking it like you did the font style file and if it works then you know that it is not finding your directory properly – Dogy Vogey Sep 24 '14 at 13:57
Is there a www folder in your structure as the CSS files seam to not be in the www directory can you please post your folder structure as it appears in eclipse/android studio? – Dogy Vogey Sep 27 '14 at 15:50
I added up my original project structure to the question. Please let me know what else you need. – User12111111 Sep 29 '14 at 07:34
Maybe try to change the file name and see if that helps, I have never had this problem before – Dogy Vogey Oct 12 '14 at 20:43
OK, Any working example that you can share it with me. That would help me working on this further. – User12111111 Oct 13 '14 at 12:09
I am getting back following error: E/Web Console﹕ Uncaught ReferenceError: showAndroidToast is not defined:13 – User12111111 Oct 14 '14 at 11:43
I got this working from below URL. http://innovate-inspiron.blogspot.in/2014/10/how-to-load-local-javascript-in-android.html – User12111111 Oct 15 '14 at 06:16

Android: how to load local javascript file to WebView

1 Answers1