Dynamically changing css values in a webview without reloading (Android)

Question

I have a WebView based app to which I want to add a 'night-mode'. My first instinct was to just have the program render the right CSS values each time depending on whether night-mode was on or not, and it works great, but it means that the page has to be reloaded each time the mode is toggled. Is there any way I can change the css values retro-actively without having to reload the page?

Marcos Placona · Accepted Answer · 2013-06-20 11:39:43Z

3

You could inject code into your page's DOM. So you could for example have a reset stylesheet, and then inject a day or night mode class with javascript into the dom as required like this:

public class WebClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }

    @Override
    public void onPageFinished(WebView view, String url) 
    {       
        view.loadUrl("javascript:document.getElementById(id).style.property=new style");       
    }
}

HTH

answered Jun 20, 2013 at 11:39

Marcos Placona

21.8k11 gold badges71 silver badges95 bronze badges

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

Collectives™ on Stack Overflow

Dynamically changing css values in a webview without reloading (Android)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related