Android Calling JavaScript functions in WebView

Question

I am trying to call some javascript functions sitting in an html page running inside an android webview. Pretty simple what the code tries to do below - from the android app, call a javascript function with a test message, which inturn calls a java function back in the android app that displays test message via toast.

The javascript function looks like:

function testEcho(message){
     window.JSInterface.doEchoTest(message);
}

From the WebView, I have tried calling the javascript the following ways with no luck:

myWebView.loadUrl("javascript:testEcho(Hello World!)");
mWebView.loadUrl("javascript:(function () { " + "testEcho(Hello World!);" + "})()");

I did enable javascript on the WebView

myWebView.getSettings().setJavaScriptEnabled(true);
// register class containing methods to be exposed to JavaScript
myWebView.addJavascriptInterface(myJSInterface, "JSInterface");

And heres the Java Class

public class JSInterface{

private WebView mAppView;
public JSInterface  (WebView appView) {
        this.mAppView = appView;
    }

    public void doEchoTest(String echo){
        Toast toast = Toast.makeText(mAppView.getContext(), echo, Toast.LENGTH_SHORT);
        toast.show();
    }
}

I've spent a lot of time googling around to see what I may be doing wrong. All examples I have found use this approach. Does anyone see something wrong here?

Edit: There are several other external javascript files being referenced & used in the html, could they be the issue?

The code you try to use misses quotes on the javascript side. — Paul de Vrieze, Mar 07 '11 at 14:40
Please note that since Android 4.2 you're required to use the `@JavascriptInterface` decorator on the Java methods that you want to make available to the WebView through the JavaScript Interface. — Fred, Jul 28 '13 at 16:47
From the code `myWebView.loadUrl("javascript:testEcho('Hello World!')");` I understand that you have already attached the html file to that webview. Could you tell me how did you do that? — Tony_craft, Mar 27 '14 at 17:04

score 212 · Answer 1 · edited Mar 10 '12 at 01:29

212

I figured out what the issue was : missing quotes in the testEcho() parameter. This is how I got the call to work:

myWebView.loadUrl("javascript:testEcho('Hello World!')");

edited Mar 10 '12 at 01:29

Community

1
1

answered Dec 02 '10 at 00:43

user163757

6,795
9
32
47

please have a look in these link http://stackoverflow.com/questions/9079374/webview-to-load-the-local-html-file-which-contains-js-as-script-src – kamal_tech_view Feb 02 '12 at 05:59
It's nice, but how do you pass on a Java object to a JavaScript function as argument? – Kovács Imre Nov 22 '13 at 15:05
1

@KovácsImre String.Format("javascript: testEcho('%d', '%d', '%d')", 1, 2, 3); I guess – user457015 Dec 27 '13 at 13:02
Thanks, I have also found out in the mean time. – Kovács Imre Dec 27 '13 at 13:12
1

Starting with KitKat there is the evaluateJavascript method, check http://stackoverflow.com/a/32163655/3063226 – Heitor Jul 29 '16 at 07:16
@user457015 hi, can you please help me at here https://stackoverflow.com/questions/63498385/how-to-pass-parameters-in-webview? – pratik vekariya Aug 21 '20 at 03:55

score 137 · Answer 2 · answered Jul 08 '15 at 11:19

137

From kitkat onwards use evaluateJavascript method instead loadUrl to call the javascript functions like below

    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
        webView.evaluateJavascript("enable();", null);
    } else {
        webView.loadUrl("javascript:enable();");
    }

answered Jul 08 '15 at 11:19

Prasad

3,462
1
23
28

3

why to use evaluateJavascript() instead of loadUrl()? – Kamran Bigdely Nov 28 '16 at 21:32
4

@kami loadUrl() will reload the page and call onPageFinished() again – Zach Nov 29 '16 at 10:18
1

@Zach It is still an issue on pre-KitKat then, isn't it? – Vsevolod Ganin Dec 22 '16 at 14:48
4

@kami Adding to Zach answer, evaluateJavascript(), will run JavaScript asynchronously. So we can avoid blocking UI thread using evaluateJavascript(). – Prasad Aug 22 '17 at 06:27
`loadUrl` also caused the software keyboard show up when I try to fill in the value in an input field. – Joshua Sep 11 '17 at 02:30

score 37 · Answer 3 · edited May 08 '12 at 08:34

37

public void run(final String scriptSrc) { 
        webView.post(new Runnable() {
            @Override
            public void run() { 
                webView.loadUrl("javascript:" + scriptSrc); 
            }
        }); 
    }

edited May 08 '12 at 08:34

antyrat

27,479
9
75
76

answered May 08 '12 at 08:32

user340994

479
4
3

and if this doesn't work, do new Thread(new Runnaable(){....}).start() – Radu Simionescu Nov 08 '13 at 08:07

score 31 · Answer 4 · edited Jan 22 '19 at 20:35

31

I created a nice wrapper to call JavaScript methods; it also shows JavaScript errors in log:

private void callJavaScript(String methodName, Object...params){
    StringBuilder stringBuilder = new StringBuilder();
    stringBuilder.append("javascript:try{");
    stringBuilder.append(methodName);
    stringBuilder.append("(");
    for (int i = 0; i < params.length; i++) {
        Object param = params[i];
        if(param instanceof String){
            stringBuilder.append("'");
            stringBuilder.append(param.toString().replace("'", "\\'"));
            stringBuilder.append("'");
        }
        if(i < params.length - 1){
            stringBuilder.append(",");
        }
    }
    stringBuilder.append(")}catch(error){Android.onError(error.message);}");
    webView.loadUrl(stringBuilder.toString());
}

You need to add this too:

private class WebViewInterface{

    @JavascriptInterface
    public void onError(String error){
        throw new Error(error);
    }
}

And add this interface to your webview:

webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebViewInterface(), "AndroidErrorReporter");

edited Jan 22 '19 at 20:35

Kostanos

9,615
4
51
65

answered Jul 09 '14 at 18:03

Ilya Gazman

31,250
24
137
216

This function, however good as an idea, has wrong implementantion. This call: `final Object a = new Object(); callJavaScript(mBrowser, "alert", 1, true, "abc", a);` will yield to `SyntaxError` with `Unexpected token` which is not surprising when you will look at the generated js call: `javascript:try{alert(,,'abc',,)}catch(error){console.error(error.message);}` – Lukasz 'Severiaan' Grela Apr 22 '15 at 08:33
Even simple call `callJavaScript(mBrowser, "alert", "abc", "def");` generates error as there is always rogue comma at the end. -1 from me. – Lukasz 'Severiaan' Grela Apr 22 '15 at 08:34
1

@Lukasz'Severiaan'Grela tnx, I fixed that. P.S Next time don't be lazy you could fix it yourself... ;) – Ilya Gazman Apr 22 '15 at 14:01
18

For future reference: Let's stay positive. Pointing out an error in the code is not lazy. It's still helpful feedback. – D.W. Apr 22 '15 at 21:00
I guess this will not work if any of the parameter has ' character in it? Example: `callJavascript(mBrowser, "can't do it");` – Kostanos Jan 22 '19 at 18:56
I just edited the answer and added the escape to (') character. – Kostanos Jan 22 '19 at 20:36

Dinesh · Answer 5 · 2019-05-09T11:36:03.310

18

Yes you have the syntax error. If you want to get your Javascript errors and printing statements in your logcat you must implement the onConsoleMessage(ConsoleMessage cm) method in your WebChromeClient. It gives the complete stack traces like Web console(Inspect element). Here is the method.

public boolean onConsoleMessage(ConsoleMessage cm) 
    {
        Log.d("Message", cm.message() + " -- From line "
                             + cm.lineNumber() + " of "
                             + cm.sourceId() );
        return true;
    }

After implementation you will get your Javascript errors and print statements (console.log) on your logcat.

edited May 09 '19 at 11:36

answered Jan 09 '13 at 15:07

Dinesh

965
2
11
23

2

I believe the is on the WebChromeClient and not the WebViewClient. – Michael Levy Feb 04 '13 at 15:26
Yes you are correct @MichaelLevy. Thanks for pointing me for that mistake. Now I have edited my answer. – Dinesh Feb 07 '13 at 06:42
1

Thanks, your answer was a just what I needed. I'd also suggest people override onJsAlert() in the WebChromeClient. The combination of javascript logging and alerts can be really helpful when debugging Javascript hosted in the webview. – Michael Levy Feb 07 '13 at 16:54

score 17 · Answer 6 · edited Jan 22 '19 at 20:36

Modification of @Ilya_Gazman answer

    private void callJavaScript(WebView view, String methodName, Object...params){
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("javascript:try{");
        stringBuilder.append(methodName);
        stringBuilder.append("(");
        String separator = "";
        for (Object param : params) {               
            stringBuilder.append(separator);
            separator = ",";
            if(param instanceof String){
                stringBuilder.append("'");
            }
                stringBuilder.append(param.toString().replace("'", "\\'"));
            if(param instanceof String){
                stringBuilder.append("'");
            }

        }
        stringBuilder.append(")}catch(error){console.error(error.message);}");
        final String call = stringBuilder.toString();
        Log.i(TAG, "callJavaScript: call="+call);


        view.loadUrl(call);
    }

will correctly create JS calls e.g.

callJavaScript(mBrowser, "alert", "abc", "def");
//javascript:try{alert('abc','def')}catch(error){console.error(error.message);}
callJavaScript(mBrowser, "alert", 1, true, "abc");
//javascript:try{alert(1,true,'abc')}catch(error){console.error(error.message);}

Note that objects will not be passed correctly - but you can serialize them before passing as an argument.

Also I've changed where the error goes, I've diverted it to the console log which can be listened by:

    webView.setWebChromeClient(new CustomWebChromeClient());

and client

class CustomWebChromeClient extends WebChromeClient {
    private static final String TAG = "CustomWebChromeClient";

    @Override
    public boolean onConsoleMessage(ConsoleMessage cm) {
        Log.d(TAG, String.format("%s @ %d: %s", cm.message(),
                cm.lineNumber(), cm.sourceId()));
        return true;
    }
}

Thanks. Will this method escape ' character inside of any variable? In other words, will it work with: `callJavascript(mBrowser, "can't do it");` ? — Kostanos, Jan 22 '19 at 18:52

score 7 · Answer 7 · answered Jan 05 '20 at 19:22

activity_main.xml

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

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

MainActivity.java


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import com.bluapp.androidview.R;

public class WebViewActivity3 extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view3);
        webView = (WebView) findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/webview1.html");


        webView.setWebViewClient(new WebViewClient(){
            public void onPageFinished(WebView view, String weburl){
                webView.loadUrl("javascript:testEcho('Javascript function in webview')");
            }
        });
    }
}

assets file

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>WebView1</title>
<meta forua="true" http-equiv="Cache-Control" content="max-age=0"/>
</head>

<body style="background-color:#212121">
<script type="text/javascript">
function testEcho(p1){
document.write(p1);
}
</script>
</body>

</html>

Linh · Answer 8 · 2021-02-02T01:35:09.837

Here is an example to load js script from the asset on WebView.
Put script to a file will help reading easier I load the script in onPageFinished because I need to access some DOM element inside the script (to able to access it should be loaded or it will be null). Depend on the purpose of the script, we may load it earlier

assets/myjsfile.js

document.getElementById("abc").innerText = "def"
document.getElementById("abc").onclick = function() {
    document.getElementById("abc").innerText = "abc"
}

WebViewActivity

webView.settings.javaScriptEnabled = true
webView.webViewClient = object : WebViewClient() {
   
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)

        val script = readTextFromAsset("myjsfile.js")
        view.loadUrl("javascript: $script")
    }
}

fun readTextFromAsset(context: Context, fileName: String): String {
    return context.assets.open(fileName).bufferedReader().use { it.readText() 
}

Android Calling JavaScript functions in WebView

8 Answers8

Linked

Related