using javascript in android webview

Question

I'm trying to start an activity from a javascript interface in my webview. The example shows a toast. How could i call a class instead of a toast?

public class JavaScriptInterface {
Context mContext;

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

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

this for the html page.

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
function showAndroidToast(toast) {
    Android.showToast(toast);
}

I'm not experienced enough to answer but have you read this: http://developer.android.com/guide/webapps/webview.html#UsingJavaScript — JaredMcAteer, May 06 '12 at 18:08
Ok I just didn't see anywhere where you enabled the javascript in the webview and though it was relevant. — JaredMcAteer, May 06 '12 at 18:13
u didnt get my question , i want to call an intent instead of a toast . i already made that toasts example working. thx anyway — Common, May 06 '12 at 18:50
I want to do it without any webview . just internally is it possible. — Sagar Nayak, Apr 17 '16 at 09:09

score 73 · Accepted Answer · edited Sep 25 '17 at 07:50

73

You have to first register the JavaScriptInterface on your webview. JavaScriptInterFace can be a inner class as shown below. This class will have a function that you can call from html page( via javaScript ) and inside this function you can write code to change activity.

Here is the working solution for you:

public class JavascriptInterfaceActivity extends Activity {
    /** Called when the activity is first created. */


    WebView wv;

    JavaScriptInterface JSInterface;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        wv = (WebView)findViewById(R.id.webView1);

        wv.getSettings().setJavaScriptEnabled(true);
        // register class containing methods to be exposed to JavaScript

        JSInterface = new JavaScriptInterface(this);
        wv.addJavascriptInterface(JSInterface, "JSInterface"); 

        wv.loadUrl("file:///android_asset/myPage.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, nextActivity.class);
            startActivity(i);
            finish();
        }
    }
}

Here is the html page

<html>
<head>
<script type="text/javascript">
function displaymessage()
{
JSInterface.changeActivity();
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>

Hope this helps...

edited Sep 25 '17 at 07:50

Vishal Dalve

324
3
16

answered May 07 '12 at 11:15

Akshay

1,137
1
10
12

1

Thank you my friend . it almost helped me to solve my problem . – Common May 09 '12 at 18:32
@Common i should take the above html code in separate html file ? – Android Killer Apr 04 '13 at 13:04
5

This is useful to call android functions from a javascript, but there is any way to call javascript functions from android code? – Tony_craft Mar 31 '14 at 09:14
what is the location of this html file ? – Mohini Nov 21 '14 at 11:35
@Tony_craft You should use something like webView.loadUrl("javascript:alert('Hello!')"); – Alexandr Feb 09 '16 at 21:21
1

I have one question, where to put the HTML page ? – McLan Sep 08 '16 at 14:54
@Suda.nese Wherever in the `assets` folder – Phantômaxx Jun 24 '17 at 17:12
I using your Activity Class in my project but I have a problem, I can't change to the second activity. My post is: https://stackoverflow.com/questions/49572948/android-how-to-use-javascript-in-an-android-webview?noredirect=1#comment86156934_49572948 – Javier C. Mar 30 '18 at 13:07
Great solution. Does anyone know if this is a valid solution for iOS too? – pantos27 Jun 10 '19 at 13:54

score 18 · Answer 2 · edited Jun 13 '17 at 08:16

18

You also need to add the @android.webkit.JavascriptInterface annotation on top of your changeActivity method in your android code, should you run on Android 4.2 or higher. See this link for more.

edited Jun 13 '17 at 08:16

Collins Abitekaniza

4,496
2
28
43

answered Feb 19 '14 at 20:07

goseib

737
3
12
24

using javascript in android webview

2 Answers2

Linked