Pass variable from Android to JavaScript launched in WebView

Question

I have a WebView which in the click of an Android button loads some JavaScript into the WebView.

My question is how would I go about passing an Android variable to the JavaScript when it's loaded.

My Current code to load the JavaScript into the WebView

private OnClickListener OnClick_grabit = new OnClickListener() {
    public void onClick(View v) {
        webView.loadUrl("javascript: function loadScript(scriptURL) { 
             var scriptElem = document.createElement('SCRIPT'); 
             scriptElem.setAttribute('language', 'JavaScript'); 
             scriptElem.setAttribute('src', scriptURL); 
             document.body.appendChild(scriptElem);
             } loadScript('http://www.pathtojavascript/javascript.js');");
    }
};

SO I need to pass something to the JavaScript initialize() from Android.

Is the script located in assets? Or do you need to load it from web? — gunar
– gunar, Commented Sep 25, 2013 at 9:50
so you're loading the web page from the web and then you would like to load a different Javascript to loaded page? — gunar
– gunar, Commented Sep 25, 2013 at 9:57
@gunar a webpage is laoded into the webview, then when the user clicks a button which is below the webview the above onclick loads a javascript from the web into the webview — DevWithZachary
– DevWithZachary, Commented Sep 25, 2013 at 9:59

Taner · Accepted Answer · 2016-03-18 16:51:42Z

17

Java Class:

public class JavaScriptInterface {
    Context mContext;
    JavaScriptInterface(Context c) {
        mContext = c;
    }    
    @JavascriptInterface
    public String getFromAndroid() {
        return "This is from android.";
    }
}

Webview code :

WebView webView = (WebView) findViewById(R.id.webview);
webView.setWebChromeClient(new WebChromeClient() {});
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");

Html and javascript:

<input type="button" value="Get from android" onClick="getFromAndroid()" />
<script type="text/javascript">
    var myVar = null;
    function getFromAndroid() {
        myVar = Android.getFromAndroid();
        alert(myVar);
    }
</script>

edited Mar 18, 2016 at 16:51

answered Mar 18, 2016 at 16:42

Taner

1771 silver badge3 bronze badges

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

2 Comments

MurifoX Over a year ago

This is hands down the best way to do it.

gumuruh Over a year ago

wawww... very very interesting ... with the interface we can connect from variable to the loaded webview....

gunar · Accepted Answer · 2013-09-25 11:55:12Z

9

First of all you need to load the script only once (your onClick is loading it every time), then call loadUrl("javascript:initialize(" + myNumber + ");")

answered Sep 25, 2013 at 11:55

gunar

14.7k7 gold badges61 silver badges88 bronze badges

2 Comments

gunar Over a year ago

Was it that simple? :)

sabith.ak Over a year ago

can you expand your answer?

hariszaman · Accepted Answer · 2015-05-21 20:49:53Z

2

The correct syntax that worked for me is

StringBuilder buf=new StringBuilder("javascript:testFunction('"+bar+"','"+foo+"')");
Log.d(TAG, "returned string:"+buf.toString());
mWebView.loadUrl(buf.toString());

answered May 21, 2015 at 20:49

hariszaman

8,4624 gold badges44 silver badges65 bronze badges

2 Comments

Vidar S. Ramdal Over a year ago

And what if bar or foo contains a '?

Ranjithkumar Over a year ago

My one day search end here.. Really best answer compared to others

goodm · Accepted Answer · 2013-09-25 09:52:05Z

0

You need to loadUrl in your webView, I got something like this in my previous app:

webView.loadUrl("javascript:wrapJS.functionName("+value+","+value+")"+);

answered Sep 25, 2013 at 9:52

goodm

7,2957 gold badges35 silver badges55 bronze badges

Comments

Sabrina · Accepted Answer · 2018-06-07 08:59:44Z

Add the JitPack repository to your build file

allprojects {
      repositories {
        ...
        maven { url 'https://jitpack.io' }
      }
}

Add this to app gradle file:

dependencies {
      compile 'com.github.wendux:WebViewJavascriptBridge:master-SNAPSHOT'
    }

prepare your java script like this:

<!doctype html>
<html><head>
</head><body>
<p>Mehdico</p>
<script>
    function setupWebViewJavascriptBridge(callback) {
        var bridge=window.WebViewJavascriptBridge||window.WKWebViewJavascriptBridge
        if (bridge) { return callback(bridge); }
        var callbacks=window.WVJBCallbacks||window.WKWVJBCallbacks
        if (callbacks) { return callbacks.push(callback); }
        window.WVJBCallbacks=window.WKWVJBCallbacks = [callback];
        if(window.WKWebViewJavascriptBridge){
          window.webkit.messageHandlers.iOS_Native_InjectJavascript.postMessage(null)
        }else{
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'https://__bridge_loaded__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }
    }

    setupWebViewJavascriptBridge(function(bridge) {
            bridge.callHandler('sendToJava', { success:'true' }, function(response) {
            })
    })
    </script>
</body></html>

if you want more handlers just duplicate this lines and change [jsToJava] and data part (success:true)

 bridge.callHandler('sendToJava', { success:'true' }, function(response) {
            })

in your xml:

        <wendu.webviewjavascriptbridge.WVJBWebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

and java:

webView = findViewById(R.id.webView);
    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    webView.setWebViewClient(new AppWebViewClients((ProgressBar) findViewById(R.id.progressBar)));

    if (Build.VERSION.SDK_INT >= 21) { // for fix invalid https certification
        webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
    }

    webView.registerHandler("sendToJava", new WVJBWebView.WVJBHandler() {
        @Override
        public void handler(Object data, WVJBWebView.WVJBResponseCallback callback) {
            Toast.makeText(ActivityPaymentStepBank.this, data.toString(), LENGTH_SHORT).show();
            Log.d("wvjsblog", data.toString());
            callback.onResult(data);
        }
    });

    webView.loadUrl("URL OF YOUR HTML FILE");

Collectives™ on Stack Overflow

Pass variable from Android to JavaScript launched in WebView

5 Answers 5

2 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related