Geek Answers Handbook

Android - How to add custom CSS to an external web page in webview

I want to apply custom CSS to an external webpage in a WebView, as follows

webView.loadUrl("<style>body {font-size:15px;}</style>"); webView.loadUrl("http://www.stackoverflow.com");
+8
android
source share
2 answers
 String html = ... // load manually // insert the style to <head> webview.loadData(html, "text/html", null);
+1
source share

You can add custom JS using javascript: URL feature.

Here you can add CSS rules using this from Java:

 /** * Creates a CSS element in the <head> section of the Web page and assigns it * to a `customSheet` JS variable */ private final static String CREATE_CUSTOM_SHEET = "if (typeof(document.head) != 'undefined' && typeof(customSheet) == 'undefined') {" + "var customSheet = (function() {" + "var style = document.createElement(\"style\");" + "style.appendChild(document.createTextNode(\"\"));" + "document.head.appendChild(style);" + "return style.sheet;" + "})();" + "}"; /** * Adds CSS properties to the loaded Web page. A <head> section should exist when this method is called. * The Web view should be configured with `.getSettings().setJavaScriptEnabled(true);` * * @param webView Web view to inject into * @param cssRules CSS rules to inject */ void injectCssIntoWebView(WebView webView, String... cssRules) { StringBuilder jsUrl = new StringBuilder("javascript:"); jsUrl .append(CREATE_CUSTOM_SHEET) .append("if (typeof(customSheet) != 'undefined') {"); int cnt = 0; for (String cssRule : cssRules) { jsUrl .append("customSheet.insertRule('") .append(cssRule) .append("', ") .append(cnt++) .append(");"); } jsUrl.append("}"); webView.loadUrl(jsUrl.toString()); }

And here is an example of using the method described above:

 @Override public void onPageFinished(WebView webView, String url) { // Several people probably worked hard on the design of this Web page, let hope they won't see what next injectCssIntoWebView( webView, "div { border: 4px solid yellow; }", "p { border: 4px solid green; }", "a { border: 4px solid black; }", "img { border: 4px solid blue; }" ); }
+1
source share

More articles:


All Articles