Hide/Show WebView via Javascript in Android

Question

In my Android web app I am trying to use javascript (from a remote HTML file) to control the visibility of an Android WebView.

I have attempted to use the addJavascriptInterface class with no success. (see http://developer.android.com/guide/webapps/webview.html)

Essentially I would like my javascript to be the following

<script>
function this() {
  Android.hideView('myWebViewID');
}
window.onload = this;
</script>

Seems like it would be easy, yet all my attempts cause my app to crash during debugging.

My latest attempt was something along these lines:

public class JavaScriptInterface {
    Context mContext;
    JavaScriptInterface(Context c) {
        mContext = c;
    }
    public void hideView(View v) {
        WebView webview_x = (WebView) v;
        webview_x.setVisibility(View.GONE);
    }
}

Vito Gentile · Accepted Answer · 2011-10-20 19:37:11Z

1

The problem is that you are casting the string "myWebViewID" in a WebView object. I guess this is impossible.

To do what you want, you have to implement something like a switch that convert the string you use in JS to an ID (int) that identifies your WebView:

public class JavaScriptInterface {
    private Activity mContext;

    JavaScriptInterface(Activity c) {
        mContext = c;
    }

    public void hideView(String v) {
        int id = stringToId(v);
        WebView webview_x = (WebView) mContext.findViewById(id);
        webview_x.setVisibility(View.GONE);
    }

    private Integer stringToId(String str) {
        if(str.equals("stringForId1") {
            return R.id.webView1;
        } else if(str.equals("stringForId2") {
            return R.id.webView2;
        } else if(...) {
          ....
        } else {
            return null;
        }
    }
}

edited Oct 20, 2011 at 19:37

answered Oct 20, 2011 at 19:19

Vito Gentile

14.6k11 gold badges65 silver badges99 bronze badges

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

2 Comments

Ziygo Over a year ago

"This method must return a result of type int" on "private int stringToId(String str) {"

Vito Gentile Over a year ago

Remove all the import about R class, and re-try. And add an else at the end of the if/else in stringToId (post edited)

Dimitris Makris · Accepted Answer · 2011-10-20 19:33:55Z

1

This is the solution:

WebView:

mWebView = (WebView) findViewById(R.id.webview);
mWebView.setWebChromeClient(new CustomWebChromeClient());
mWebView.addJavascriptInterface(new CustomJavaScriptInterface(),
                "android");
mWebView.loadUrl("file:///android_asset/www/test.html");

CustomeJavascriptInterface:

final class CustomJavaScriptInterface {

    public void hide() {

        mHandler.post(new Runnable() {
            public void run() {
                mWebView.setVisibility(View.INVISIBLE);
            }
        });
    }
}

HTML:

<div onclick="window.android.hide()">Click!</div>

You should be fine with this!

Note that you cannot access the webview and change its visibility without a handler!

Hope this helps!

answered Oct 20, 2011 at 19:33

Dimitris Makris

5,1832 gold badges36 silver badges54 bronze badges

4 Comments

Vito Gentile Over a year ago

This works only if you want to hide the WebView bounded with JSInterface. If you want to hide another webview, this method doesn't work

Dimitris Makris Over a year ago

Thus you assume you have two (or even more) webviews in a layout and you want to control from the HTML page of the one webview the state of the other webviews? No, the above code is not for this. If this is what Ziygo wants, I ll try another alternative..

Vito Gentile Over a year ago

"In my Android web app I am trying to use javascript (from a remote HTML file) to control the visibility of AN Android WebView." ;)

Dimitris Makris Over a year ago

I see your point :) In any case Ziygo can help us and explain us what exactly he wants and any of our solutions solves his problem :)

Collectives™ on Stack Overflow

Hide/Show WebView via Javascript in Android

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related