title: Android - How to use Javascript in an Android WebView?
body: <p>I have a problem in my Hybrid Android App.I need to have a WebView with an HTML and in this HTML I have a button. </p>
  
  <p>I have a layout with a WebView and I have a button inside the HTML, I'm trying to launch a second Activity with another screen(also a layout with a WebView) when the user click this button.</p>
  
  <p>My problem is that this button is not launching the second activity.</p>
  
  <p>I'm using Cordova.</p>
  
  <p>This is my layout(<code>pruebas.xml</code>):</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"&gt;
  
  &lt;WebView
      android:id="@+id/webview"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_below="@+id/textView" /&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>This is my <code>MainActivity.java</code>:</p>
  
  <pre><code>public class MainActivity extends CordovaActivity{
  
      WebView wv;
  
      JavaScriptInterface JSInterface;
  
      @Override
      public void onCreate(Bundle savedInstanceState){
  
          super.onCreate(savedInstanceState);
  
          StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();
          StrictMode.setVmPolicy(builder.build());
  
          setContentView(R.layout.pruebas);
          wv = (WebView)findViewById(R.id.webview);
  
          wv.getSettings().setJavaScriptEnabled(true);
          wv.getSettings().setDomStorageEnabled(true);
          // register class containing methods to be exposed to JavaScript
  
          JSInterface = new MainActivity.JavaScriptInterface(this);
          wv.addJavascriptInterface(JSInterface, "JSInterface");
  
          wv.loadUrl("file:///android_asset/www/description.html");
  
      }
  
      public class JavaScriptInterface {
          Context mContext;
  
          /** Instantiate the interface and set the context */
          JavaScriptInterface(Context c) {
              mContext = c;
          }
  
          @android.webkit.JavascriptInterface
          public void changeActivity(){
              Intent i = new Intent(MainActivity.this, JavascriptInterfaceActivity.class);
              i.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
              startActivity(i);
              finish();
          }
      }
  }
  </code></pre>
  
  <p>And this is my second activity (<code>JavascriptInterfaceActivity.java</code>):</p>
  
  <pre><code>public class JavascriptInterfaceActivity extends Activity {
  
      WebView wv;
  
      JavaScriptInterface JSInterface;
  
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
  
          StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();
          StrictMode.setVmPolicy(builder.build());
  
          setContentView(R.layout.pruebas);
          wv = (WebView)findViewById(R.id.webview);
  
          wv.getSettings().setJavaScriptEnabled(true);
          wv.getSettings().setDomStorageEnabled(true);
  
          JSInterface = new JavaScriptInterface(this);
          wv.addJavascriptInterface(JSInterface, "JSInterface");
  
          wv.loadUrl("file:///android_asset/www/description-long.html");
  
      }
  
  
      public class JavaScriptInterface {
          Context mContext;
  
          /** Instantiate the interface and set the context */
          JavaScriptInterface(Context c) {
              mContext = c;
          }
  
          @android.webkit.JavascriptInterface
          public void changeActivity(){
              Intent i = new Intent(JavascriptInterfaceActivity.this, MainActivity.class);
              i.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
              startActivity(i);
              finish();
          }
      }
  }
  </code></pre>
  
  <p>This is the <code>description.html</code>, the other HTML (<code>description-long.html</code>) is similar:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src='changeactivity.js'&gt;&lt;/script&gt;
  
      &lt;meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"&gt;
      &lt;meta name="format-detection" content="telephone=no"&gt;
      &lt;meta name="msapplication-tap-highlight" content="no"&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt;
      &lt;title&gt;Main activity&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button id='changeactivity'&gt;Changue activity&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my <code>changeactivity.js</code> file in <code>assets/www</code>:</p>
  
  <pre><code> function displaymessage(){
       JSInterface.changeActivity();
   }
  
   document.addEventListener('DOMContentReady', function () {
           document.getElementById('changeactivity').addEventListener('click', displaymessage);
   });
  </code></pre>
  
  <p>Any suggestion? I check these posts:</p>
  
  <p><a href="https://stackoverflow.com/a/10481108/3739382">https://stackoverflow.com/a/10481108/3739382</a></p>
  
  <p><a href="https://stackoverflow.com/a/31631068/3739382">https://stackoverflow.com/a/31631068/3739382</a></p>