How to apply custom css to android Webview when URL is from internet server?

Question

I'm showing my wordpress blog posts on my android app.

Giving wordpress url inside webview

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

         mWebView = (WebView) findViewById(R.id.activity_main_webview);
        // Enable Javascript
         WebSettings webSettings = mWebView.getSettings();
         webSettings.setJavaScriptEnabled(true);


        // Force links and redirects to open in the WebView instead of in a browser
        mWebView.setWebViewClient(new WebViewClient());

        mWebView.loadUrl("http://www.myblog.com/start/");        
    }

But I want to remove footer block for that I just want to add

.footer{
diplay:none
}

How can I add this custom css code?

tar · Accepted Answer · 2014-06-13 02:04:42Z

3

When the page is loaded, run some JavaScript, something like:

mWebView.loadUrl("javascript:document.getElementsByClassName('footer')[0].style.display = 'none';");

should do it. On Android 4.4, you can use the WebView.evaluateJavaScript API.

Detecting when the page is loaded such that this JavaScript will work is tricky. The most reliable way to do it would be to install a JavaScript Interface that calls back to Java when the onload event is fired in your HTML. You'd want to have something like this in your Java, before your first call to WebView.loadUrl:

mWebView.addJavascriptInterface(new Object() {

    @JavascriptInterface
    public void onload() {

        // This is executed on a background thread, so post back to UI thread.
        mWebView.post(new Runnable() {

            @Override
            public void run() {
                mWebView.loadUrl("javascript:...");
            }

        });

    }

}, "android");

And then in your HTML:

<body onload="window.android.ready();">

Hope this helps.

edited Jun 13, 2014 at 2:04

tar

1,5661 gold badge21 silver badges35 bronze badges

answered Mar 3, 2014 at 9:10

ksasq

4,4122 gold badges20 silver badges10 bronze badges

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

6 Comments

Neo Over a year ago

where exactly code should be?

//Load url in webview mWebView.loadUrl(url);        mWebView.loadUrl("javascript:document.getElementsById('footer-wrapper')[0].style.display = 'none';");

ksasq Over a year ago

Added some thoughts that should help you.

ksasq Over a year ago

Anything in logcat? Are you sure that 'footer' is the class name of the element you want to hide? Does it have an id instead?

Shanavas M Over a year ago

<body onload="window.android && window.android.ready();"> is fail safe

Algorithmic Programmer Over a year ago

if it's an external url, how are you supposed to add onload="window.android.ready();" to the body tag of the html?

|

Shanavas M · Accepted Answer · 2017-08-23 07:52:01Z

-2

Another trick is to set custom user agent string for webview

webview.getSettings().setUserAgentString("foo");

and in javascript

if (window.navigator.userAgent == "foo") {
  // do whatever you want :)
}

If you want to preserve default user agent string, you can append "foo" to it and usewindow.navigator.userAgent.includes('foo') in javascript

answered Aug 23, 2017 at 7:52

Shanavas M

1,6391 gold badge18 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to apply custom css to android Webview when URL is from internet server?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related