Maison > interface Web > tutoriel CSS > Comment injecter du CSS personnalisé dans un site Web à l'aide de WebView sous Android ?

Comment injecter du CSS personnalisé dans un site Web à l'aide de WebView sous Android ?

Susan Sarandon
Libérer: 2024-11-01 06:21:31
original
193 Les gens l'ont consulté

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

Injecter du CSS dans un site Web à l'aide de WebView sous Android

Impossible d'injecter du CSS directement dans un site Web affiché via une WebView, il est possible de manipuler le DOM de la page en utilisant JavaScript. Voici comment procéder :

1. Activer JavaScript dans WebView :

<code class="java">webView.getSettings().setJavaScriptEnabled(true);</code>
Copier après la connexion

2. Ajouter un WebViewClient :

<code class="java">webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        // Inject CSS when page is done loading
        injectCSS();
        super.onPageFinished(view, url);
    }
});</code>
Copier après la connexion

3. Charger le site Web :

<code class="java">webView.loadUrl("https://www.google.com");</code>
Copier après la connexion

4. Injectez du CSS à l'aide de JavaScript :

<code class="java">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';" +
                // Decode the CSS from BASE64
                "style.innerHTML = window.atob('" + encoded + "');" +
                "parent.appendChild(style)" +
                "})()");
    } catch (Exception e) {
        e.printStackTrace();
    }
}</code>
Copier après la connexion

Remarque :

  • Le fichier style.css doit se trouver dans le dossier Assets de votre projet.
  • La méthode webView.loadUrl() doit être appelée après le rappel onPageFinished(), car l'injection de CSS avant le chargement de la page n'aura aucun effet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal