Wie füge ich benutzerdefiniertes CSS in eine Website ein, die in einem WebView auf Android angezeigt wird?

Integration von CSS in Websites mithilfe von WebViews in Android

Das Einfügen von benutzerdefiniertem CSS in Websites, die in Webviews angezeigt werden, kann die Benutzererfahrung verbessern. In diesem Artikel wird eine Methode zum Einfügen von CSS in eine Webseite beschrieben, die in einer Webansicht auf einem Android-Gerät angezeigt wird.

Problembeschreibung

Ihr Ziel ist es, die Hintergrundfarbe von www zu ändern .google.com auf Rot. Sie haben versucht, CSS aus einer Datei namens style.css im Asset-Ordner einzuschleusen, aber Ihr Code funktioniert nicht.

Falscher Code

Der falsche Code von Ihnen vorausgesetzt:

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

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

Richtige Lösung

CSS kann nicht direkt in Webseiten eingefügt werden; Sie können das DOM der Seite jedoch mithilfe von JavaScript bearbeiten. Hier ist der korrigierte Code:

// 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();
    }
}

Dieser Code richtet einen WebViewClient ein, der darauf wartet, dass die Seite vollständig geladen ist, bevor er CSS in die Webseite einfügt. Die injectCSS()-Methode liest die CSS-Datei aus dem Asset-Ordner, codiert sie in Base64 und hängt dann mithilfe von JavaScript das Stylesheet an den Dokumentkopf der Webseite an.

Das obige ist der detaillierte Inhalt vonWie füge ich benutzerdefiniertes CSS in eine Website ein, die in einem WebView auf Android angezeigt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!