Rumah > Artikel > hujung hadapan web > Bagaimana untuk Menyuntik CSS Tersuai ke dalam Laman Web yang Dipaparkan dalam WebView pada Android?

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

Mary-Kate Olsenasal: 2024-10-28 20:17:02812semak imbas

How to Inject Custom CSS into a Website Displayed in a WebView on 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 = "<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");

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!

JavaScript css for using append dom this background android webview

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bolehkah Anda Membuka Pautan Luaran dalam Tab Baharu Hanya Menggunakan CSS?Artikel seterusnya：Bolehkah Anda Membuka Pautan Luaran dalam Tab Baharu Hanya Menggunakan CSS?

Artikel berkaitan

Lihat lagi