Android の WebView に表示される Web サイトにカスタム CSS を挿入するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

Android の WebView に表示される Web サイトにカスタム CSS を挿入するにはどうすればよいですか?

Mary-Kate Olsen

Oct 28, 2024 pm 08:17 PM

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

Android で WebView を使用して Web サイトに CSS を組み込む

Web ビュー内に表示される Web サイトにカスタム CSS を挿入すると、ユーザーエクスペリエンスを向上させることができます。この記事では、Android デバイスの Web ビューに表示される Web ページに CSS を挿入する方法について説明します。

問題の説明

あなたの目標は、www の背景色を変更することです。 .google.com を赤にします。アセットフォルダーにある 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 を Web ページに直接挿入することはできません。ただし、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();
    }
}

ログイン後にコピー

このコードは、Web ページに CSS を挿入する前にページの読み込みが完了するのを待つ WebViewClient を設定します。 injectCSS() メソッドは、アセットフォルダーから CSS ファイルを読み取り、Base64 でエンコードした後、JavaScript を使用してスタイルシートを Web ページのドキュメントヘッドに追加します。

以上がAndroid の WebView に表示される Web サイトにカスタム CSS を挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。