How to communicate between WebView & JavaScript?

Question

I am developing native application. My application have a WebView. I want to log this WebView's component's every action. Which button clicked, which image dragged. After that, I will log those things, I want to store in SQLite.

So, I googled and find WebAppInterface which communicates Java & JavaScript. But this communication isn't enough. I can't send database from WebAppInterface class.

I want to ask this question actually (minute 46:00).

Is it possible? Or, another solution?

Regards,

Why don't you use javascript interface and inject javascript that will log all clicks inside a website? — Arkadiusz 'flies' Rzadkowolski, Feb 28 '13 at 09:12
I can do that, but after I must store SQLite finally. But how? — Breed Hansen, Feb 28 '13 at 09:15
Take a look my answer, after you listen everything with java script, send the data back to Java with Cordova Plugin and save it into SQLite. — osayilgan, Feb 28 '13 at 09:18
@BreedHansen take a look on this link as well [link](https://github.com/phonegap/phonegap-plugins/tree/master/Android) — osayilgan, Feb 28 '13 at 09:24

Arkadiusz 'flies' Rzadkowolski · Accepted Answer · 2014-06-25T07:54:54.517

9

You should add javascript interface to your webView like that:

webView.addJavascriptInterface(new JavascriptInterface(this), "AndroidFunction");

You should create interface class:

public class JavascriptInterface{
Context mContext;

    JavascriptInterface(Context c) {
        mContext = c;
    }

    public void save(String action){
        // save to database
    }
}

On the website you should call:

AndroidFunction.save("actionName");

edited Jun 25 '14 at 07:54

answered Feb 28 '13 at 09:18

Arkadiusz 'flies' Rzadkowolski

5,676
2
29
31

I tried that solution. getWritableDatabase(); methot isn't working. – Breed Hansen Feb 28 '13 at 09:19
It does if you use proper context. – Arkadiusz 'flies' Rzadkowolski Feb 28 '13 at 09:19
I tried same context. I save same data from JavaScript and Java. Java worked, but JavaScript didn't work. Data same data, database same database. Did you try your answer before? – Breed Hansen Feb 28 '13 at 09:22
I have something similar in one of my apps. If you properly pass the action name from javascript to java there is no problem saving it. – Arkadiusz 'flies' Rzadkowolski Feb 28 '13 at 09:24
You must also remember to enable javascript: webView.getSettings().setJavaScriptEnabled(true); – Arkadiusz 'flies' Rzadkowolski Feb 28 '13 at 09:25
I enabled already. And action name is true. I can go WebInterface method. I can run toast example. But if I try to reach database. I can't do that. I debugged and find where is error. getWritableDatabase(); is can't found. – Breed Hansen Feb 28 '13 at 09:26
That means you are using getWritableDatabase wrong. Have you tried it this way? database = (new DatabaseHelper(mContext)).getWritableDatabase(); – Arkadiusz 'flies' Rzadkowolski Feb 28 '13 at 09:44
I found the problem. I missed create one object. Thanks a lot. – Breed Hansen Feb 28 '13 at 09:44
The url should be local (ie file://...) or it can be a web url (ie http://...) as well? – denispyr Jul 10 '13 at 17:11

temple · Answer 2 · 2014-06-11T17:10:14.687

official link :http://developer.android.com/reference/android/webkit/WebView.html

 class JsObject {
        @JavascriptInterface
        public String toString() { return "injectedObject"; }
 }
 webView.addJavascriptInterface(new JsObject(), "injectedObject");
 webView.loadData("", "text/html", null);
 webView.loadUrl("javascript:alert(injectedObject.toString())");

------------------------------- MUST API>17

my tune up, HTML, jsobj.html:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                <title>Hello TEST JS</title>
            </head>

            <body style="background: white; font-family: Helvetica">

                <script type="text/javascript">
                document.write(AndroidFunction.show());
                AndroidFunction.save("abc");
                </script>
            </html>

Android:

web.addJavascriptInterface(new JsObject(), "AndroidFunction");

           ...

     class JsObject{
         @JavascriptInterface           
         public void save(String action){
             L.d("action:"+action);
         }

          public String show(){
                 return "Hello Android";
             }
     }

score 0 · Answer 3 · answered Feb 28 '13 at 09:15

0

Have you ever take a look on PhoneGap and Cordova Plugin ? Cordova Plugin provides really strong communication between Java to webview and webview to Java. And there are already some open source plugins written about logging the data, you can just embed into your application.

Take a look on this link : Cordova Plugin

answered Feb 28 '13 at 09:15

osayilgan

5,873
7
47
68

Thanks for answer. I know PhoneGap and Cordova. I want to develop native app. – Breed Hansen Feb 28 '13 at 09:17
Cordova Plugin just provides you a communication between web view and native side, so it doesn't mean that you cannot have native user interface, you can make it 100% native. – osayilgan Feb 28 '13 at 09:20

How to communicate between WebView & JavaScript?

3 Answers3

Linked