title: Android: how to load local javascript file to WebView
body: <p>I am trying to write a program which does a simple <code>toast</code>. When I tried adding the script within the <code>HTML</code>, it worked and am able to see the <code>toast</code>. But when I placed the same <code>script</code> code in separate file under <code>assert</code> folder(script.js), it fails to inject the <code>javascript</code>.</p>
  
  <p>I am supporting API 15 and above.</p>
  
  <p>Here is the code, where I trying to inject the <code>script</code>. </p>
  
  <pre><code>    myWebView = (WebView) findViewById(R.id.webviewid);
  
      myWebView.loadDataWithBaseURL("file:///android_asset/",
              "&lt;html&gt;" +
              "&lt;head&gt;&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"&gt;" +
              "&lt;style type=\"text/css\"&gt;\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" +
              "&lt;/style&gt;" +
              "&lt;/head&gt;" +
              "&lt;body&gt;" +
              "&lt;input type=\"button\" value=\"Say hello\" onClick=\"showAndroidToast('Hello Android!')\" /&gt;" +
              "&lt;script type=\"text/javascript\" src=\"file:///android_asset/www/js/script.js\"/&gt;" +
              "&lt;/body&gt;" +
              "&lt;/html&gt;", "text/html", "UTF-8", null);
      WebSettings webSettings = myWebView.getSettings();
      webSettings.setJavaScriptEnabled(true);
      myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
      myWebView.setWebViewClient(new MyWebViewClient());
  </code></pre>
  
  <p>Here is my <code>javascript</code> code. (script.js)</p>
  
  <pre><code>    function showAndroidToast(toast) {
          Android.showToast(toast);
      };
  </code></pre>
  
  <p>Here is my <code>Javascript</code> Interface:</p>
  
  <pre><code>    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();
          }
      }
  </code></pre>
  
  <p>How can I inject <code>javascript</code> file? Any help is appreciated.</p>
  
  <p>My Project structure is like this:</p>
  
  <pre><code>    ---
        |
        ---- App
             |
             -----src
                  |
                  -----main
                       |
                       ------asserts
                       |     |
                       |     ------fonts
                       |     |
                       |     ------www
                       |     |     |
                       |     |     ------js
                       |     |           |
                       |     |           ------script.js
                       |
                       ------java
                       |
                       ------res
  </code></pre>
  
  <p>The cat log shows:</p>
  
  <pre><code> E/Web Console﹕ Uncaught ReferenceError: showAndroidToast is not defined:13
  </code></pre>