Android - How to use Javascript in an Android WebView?

Question

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.

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.

My problem is that this button is not launching the second activity.

I'm using Cordova.

This is my layout(pruebas.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<WebView
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_below="@+id/textView" />

</LinearLayout>

This is my MainActivity.java:

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();
        }
    }
}

And this is my second activity (JavascriptInterfaceActivity.java):

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();
        }
    }
}

This is the description.html, the other HTML (description-long.html) is similar:

<!DOCTYPE html>
<html>
<head>
    <script src='changeactivity.js'></script>

    <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 *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>Main activity</title>
</head>
<body>
<button id='changeactivity'>Changue activity</button>
</body>
</html>

This is my changeactivity.js file in assets/www:

 function displaymessage(){
     JSInterface.changeActivity();
 }

 document.addEventListener('DOMContentReady', function () {
         document.getElementById('changeactivity').addEventListener('click', displaymessage);
 });

Any suggestion? I check these posts:

https://stackoverflow.com/a/10481108/3739382

https://stackoverflow.com/a/31631068/3739382

have you add this line myWebView.getSettings().setJavaScriptEnabled(true); — Sanjay
– Sanjay, Commented Mar 30, 2018 at 11:02
check this it might help you stackoverflow.com/questions/32911238/… — Sanjay
– Sanjay, Commented Mar 30, 2018 at 11:03
Yes, I have this line in my Activity: wv.getSettings().setJavaScriptEnabled(true); I'm not using 3d effects or similar, I only have a simple HTML. — Javier C.
– Javier C., Commented Mar 30, 2018 at 11:33

Javier C. · Accepted Answer · 2018-04-09 17:43:42Z

1

Based on the Binding JavaScript documentation

Note: The object that is bound to your JavaScript runs in another thread and not in the thread in which it was constructed.

You are starting the activity on non-UI thread. You should run it on UI thread as follows:

@android.webkit.JavascriptInterface
    public void changeActivity(){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                 Intent i = new Intent(MainActivity.this, JavascriptInterfaceActivity.class);
                 i.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                 startActivity(i);
                 finish();
            }
        });

    }

Alternatively you can also use Handler.

edited Apr 9, 2018 at 17:43

Javier C.

8,3255 gold badges47 silver badges57 bronze badges

answered Mar 30, 2018 at 13:29

Sagar

25.1k4 gold badges69 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Javier C. Over a year ago

Thanks. I put your code but the problem persist. I also debugged the app but looks like never enter in the changeActivity method, probably fails something in the "connection" between Javascript and the activity.

Sagar Over a year ago

How about you try <input type="button" id="changeactivity" value="Changue activity" onClick="displaymessage()"> Then put the <script> function displaymessage(){ JSInterface.changeActivity(); } </script> directly in the body? Just to ensure that communication works between Android code and JavaScript

Javier C. Over a year ago

Thanks! Finally I fixed an error in my code and finally is working with your changeActivity() code.

Collectives™ on Stack Overflow

Android - How to use Javascript in an Android WebView?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related