在Android中使用WebView注入CSS样式

在本文中，我们将介绍如何在Android的WebView中通过注入CSS样式来改变一个网站的外观。WebView是Android提供的一个用于显示Web页面的控件，它可以加载网页并提供一些基本的浏览器功能。

阅读更多：CSS 教程

CSS样式和注入

CSS（层叠样式表）是一种用于定义网页显示样式的语言。它可以控制网页的字体、颜色、布局等，使网页变得更加美观和易读。而在Android中，我们可以通过注入CSS样式来改变WebView显示的网页的外观。

注入CSS样式到WebView有两种常见的方法：

使用JavaScript代码注入：通过WebView的evaluateJavascript()方法执行JavaScript代码，将CSS样式以<style>标签的形式插入到网页的<head>标签中。
使用WebChromeClient：创建一个继承自WebChromeClient的类，重写其onProgressChanged()方法，在网页加载完成后通过调用loadUrl()方法注入CSS样式。

下面，我们将分别介绍这两种方法。

使用JavaScript代码注入

首先，我们需要创建一个字符串变量来存储要注入的CSS样式代码，例如：

String cssStyle = "<style> body { background-color: #efefef; } </style>";

然后，在WebView的onProgressChanged()方法中使用evaluateJavascript()方法来注入CSS样式代码：

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);

        if (newProgress == 100) {
            webView.evaluateJavascript(cssStyle, null);
        }
    }
});

在上述代码中，我们将CSS样式代码以参数的形式传递给evaluateJavascript()方法，并在网页加载完成后执行注入操作。

使用WebChromeClient

首先，我们需要创建一个继承自WebChromeClient的类，重写其中的onProgressChanged()方法。在该方法中，我们可以调用loadUrl()方法来注入CSS样式。

private class MyWebChromeClient extends WebChromeClient {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);

        if (newProgress == 100) {
            String cssUrl = "file:///android_asset/custom.css";
            String js = "javascript:(function() { " +
                    "var link = document.createElement('link'); " +
                    "link.rel = 'stylesheet'; " +
                    "link.href = '" + cssUrl + "'; " +
                    "document.head.appendChild(link); " +
                    "})()";

            view.loadUrl(js);
        }
    }
}

在上述代码中，我们使用loadUrl()方法执行了一段JavaScript代码，该代码将CSS样式文件以<link>标签的形式插入到网页的<head>标签中。

在WebView中加载网页

我们可以在Activity或Fragment中的onCreate()方法中创建WebView，并使用上述方式注入CSS样式。

WebView webView = findViewById(R.id.webView);
webView.setWebChromeClient(new MyWebChromeClient());

webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("https://www.example.com/");

在上述代码中，我们首先创建了一个WebView实例，并设置了一个自定义的WebChromeClient。然后，我们启用了JavaScript，最后使用loadUrl()方法加载了一个网页。

通过上述步骤，我们在Android中的WebView中成功注入了CSS样式，从而改变了网页的外观。