Comment injecter du CSS dans un site Web affiché dans une WebView Android ?

Injecter du CSS dans un site Web via WebView sous Android

Lorsque vous tentez de modifier l'apparence d'un site Web chargé dans une WebView, par exemple en modifiant la couleur d'arrière-plan de Google.com au rouge, en injectant un fichier style.css depuis le dossier assets, des erreurs imprévues peuvent survenir.

Le code fourni ne parvient pas à injecter le fichier style.css car WebView ne peut pas accéder directement Fichiers CSS.

Solution :

Pour injecter du CSS dans un site Web affiché dans une WebView, une approche basée sur JavaScript doit être utilisée :

<code class="java">public class MainActivity extends ActionBarActivity {

  // Initialize WebView
  private WebView webView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Create WebView and enable JavaScript
    webView = new WebView(this);
    setContentView(webView);
    webView.getSettings().setJavaScriptEnabled(true);

    // Set WebViewClient for page load handling
    webView.setWebViewClient(new WebViewClient() {

      @Override
      public void onPageFinished(WebView view, String url) {
        // Inject CSS after page load
        injectCSS();
        super.onPageFinished(view, url);
      }
    });

    // Load the website
    webView.loadUrl("https://www.google.com");
  }

  // Inject CSS method
  private void injectCSS() {
    try {
      // Retrieve style.css from assets folder
      InputStream inputStream = getAssets().open("style.css");
      byte[] buffer = new byte[inputStream.available()];
      inputStream.read(buffer);
      inputStream.close();

      // Encode and insert CSS into HTML document head
      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';" +
          "style.innerHTML = window.atob('" + encoded + "');" +
          "parent.appendChild(style)" +
          "})()");
    } catch (Exception e) {
      e.printStackTrace();
    }
  }

  // ... (Other methods and menus)
}</code>

Ce code amélioré permet l'injection de CSS en utilisant JavaScript. Il lit le fichier style.css du dossier assets, l'encode en Base64 et l'intègre dans l'en-tête du document HTML, permettant la manipulation des styles du site Web.

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!