Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android - How to inject custom css into external webpage in webview

Tags:

android

I want to apply Custom CSS into external webpage in WebView just like follow

webView.loadUrl("<style>body {font-size:15px;}</style>");
webView.loadUrl("http://www.stackoverflow.com");
like image 889
PPShein Avatar asked Jan 05 '12 11:01

PPShein


People also ask

Is it possible to get data from HTML forms into Android while WebView?

Yes you can, you can use javascript to get webpage content. Then use the webview jsInterface to return the content to you java code.

How do I render HTML in WebView?

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. In the above code, we have taken web view to show html content.

What is alternative of WebView in android?

Alternatives to WebView If you want to send users to a mobile site, build a progressive web app (PWA). If you want to display third-party web content, send an intent to installed web browsers. If you want to avoid leaving your app to open the browser, or if you want to customize the browser's UI, use Custom Tabs.


1 Answers

You can inject custom JS by using the javascript: URL capability.

Here's how 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's an usage example of the above method:

@Override
public void onPageFinished(WebView webView, String url) {
    // Several people probably worked hard on the design of this Web page, let's hope they won't see what's next
    injectCssIntoWebView(
        webView,
        "div { border: 4px solid yellow; }",
        "p { border: 4px solid green; }",
        "a { border: 4px solid black; }",
        "img { border: 4px solid blue; }"
    );
}
like image 180
Adrien Aubel Avatar answered Oct 29 '22 06:10

Adrien Aubel