如何將自訂 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中文網其他相關文章！