Bagaimana untuk Menyuntik CSS Tersuai ke dalam Laman Web yang Dipaparkan dalam WebView pada Android?

Menggabungkan CSS ke dalam Tapak Web Menggunakan WebViews dalam Android

Menyuntik CSS tersuai ke dalam tapak web yang dipaparkan dalam paparan web boleh meningkatkan pengalaman pengguna. Artikel ini membincangkan kaedah untuk menyuntik CSS ke dalam halaman web yang dipaparkan dalam paparan web pada peranti Android.

Penerangan Masalah

Matlamat anda adalah untuk mengubah suai warna latar belakang www .google.com kepada merah. Anda telah cuba menyuntik CSS daripada fail bernama style.css yang terletak dalam folder aset, tetapi kod anda tidak berfungsi.

Kod Salah

Kod yang salah anda disediakan:

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

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

Penyelesaian Betul

CSS tidak boleh disuntik terus ke dalam halaman web; walau bagaimanapun, anda boleh memanipulasi DOM halaman menggunakan JavaScript. Berikut ialah kod yang diperbetulkan:

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

Kod ini menyediakan WebViewClient yang menunggu halaman selesai dimuatkan sebelum menyuntik CSS ke dalam halaman web. Kaedah injectCSS() membaca fail CSS daripada folder aset, mengekodnya dalam Base64 dan kemudian menggunakan JavaScript untuk menambahkan lembaran gaya pada kepala dokumen halaman web.

Atas ialah kandungan terperinci Bagaimana untuk Menyuntik CSS Tersuai ke dalam Laman Web yang Dipaparkan dalam WebView pada Android?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!