Android - How to inject custom css into external w

2020-07-06 07:37发布

站内问答 / Android
1248 2 6

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");

标签： android
举报
2条回答
爱情/是我丢掉的垃圾
2楼-- · 2020-07-06 08:15 
String html = ... // load manually
// insert the style to <head>
 webview.loadData(html, "text/html", null);
查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2020-07-06 08:28

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; }"
    );
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)