如何将自定义 CSS 注入到 Android 上 WebView 中显示的网站中？-css教程-PHP中文网

如何将自定义 CSS 注入到 Android 上 WebView 中显示的网站中？

Mary-Kate Olsen

发布： 2024-10-28 20:17:02

原创

820 人浏览过

How to Inject Custom CSS into a Website Displayed in a WebView on Android?

在 Android 中使用 WebView 将 CSS 合并到网站中

将自定义 CSS 注入到 Web 视图中显示的网站可以增强用户体验。本文讨论了一种在 Android 设备上的 webview 中显示的网页中注入 CSS 的方法。

问题描述

您的目标是修改 www 的背景颜色.google.com 变为红色。您尝试从 asset 文件夹中名为 style.css 的文件注入 CSS，但您的代码无法正常工作。

代码不正确

您的代码不正确提供：

String html = "<html><head><style> src: url('file:///android_asset/style.css')</style></head></html>";

webView.loadData(html, "text/html", "utf-8");
webView.loadUrl("https://www.google.com");

登录后复制

正确解决方案

CSS不能直接注入网页；但是，您可以使用 JavaScript 操作页面的 DOM。下面是更正后的代码：

// MainActivity.java

...

// Enable Javascript
webView.getSettings().setJavaScriptEnabled(true);

// Add a WebViewClient
webView.setWebViewClient(new WebViewClient() {

    @Override
    public void onPageFinished(WebView view, String url) {

        // Inject CSS when page is done loading
        injectCSS();
        super.onPageFinished(view, url);
    }
});

...

// Inject CSS method: read style.css from assets folder
// Append stylesheet to document head
private void injectCSS() {
    try {
        InputStream inputStream = getAssets().open("style.css");
        byte[] buffer = new byte[inputStream.available()];
        inputStream.read(buffer);
        inputStream.close();
        String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
        webView.loadUrl("javascript:(function() {" +
                "var parent = document.getElementsByTagName('head').item(0);" +
                "var style = document.createElement('style');" +
                "style.type = 'text/css';" +
                // Tell the browser to BASE64-decode the string into your script !!!
                "style.innerHTML = window.atob('" + encoded + "');" +
                "parent.appendChild(style)" +
                "})()");
    } catch (Exception e) {
        e.printStackTrace();
    }
}

登录后复制

此代码设置一个 WebViewClient，等待页面完成加载，然后再将 CSS 注入网页。 jectCSS() 方法从 asset 文件夹中读取 CSS 文件，将其编码为 Base64，然后使用 JavaScript 将样式表附加到网页的文档头。

以上是如何将自定义 CSS 注入到 Android 上 WebView 中显示的网站中？的详细内容。更多信息请关注PHP中文网其他相关文章！