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


Tags: android,html,css,wordpress,webview

Problem :

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?



Solution :

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.


    CSS Howto..

    How to make nav menu fall onto the page?

    How to use font-awesome from server

    CSS : How to add an absolute div to a scrollable background? [closed]

    How to Make Tabs In CSS?

    How to convert RGBA to filter for older IE browsers

    How to give outer glow effect to column in HTML/CSS?

    How to change Bootstrap-select's placeholder color

    How to Customise the angular material date-picker?

    Php - Javascript - How do I know which pages are in color and which are in black and white?

    How to prevent css loaded with query being applied to whole page?

    How to have a bold header text?

    How do you stretch header, content & footer color across a page with everything being centered in a fixed width?

    How do you style/select inline-block elements in the first row when in a flexible container?

    How to hide the “body” statement in css and javascript

    how to load different css files with different screen sizes?

    How to add a banner inside a div at the bottom?

    How to change custom Check Box border with Dart

    How to combine wildcard and not selectors in CSS

    How can I select first element with a specific class

    How to upload image to an existing image src in angularjs, css

    How to use Custom Fonts using CSS?

    Fontawesome: How to control height and width of stacked icons

    How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

    How to include all css kept in a direcotry?

    How to add randomness to the blink effect? [closed]

    how to auto adjust table td width from the content

    How to use if else blocks to decide style in Razor?

    how to add line break in HTML using jQuery

    How to display the the full content of a database on clicking on 'Read More' button

    How can I set css for a class in a class?