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

Menyuntik CSS ke dalam Laman Web melalui WebView dalam Android

Apabila cuba mengubah rupa tapak web yang dimuatkan dalam WebView, seperti menukar warna latar belakang Google.com kepada merah, dengan menyuntik fail style.css daripada folder aset, ralat yang tidak dijangka mungkin timbul.

Kod yang disediakan gagal menyuntik fail style.css kerana WebView tidak boleh mengakses terus Fail CSS.

Penyelesaian:

Untuk menyuntik CSS ke dalam tapak web yang dipaparkan dalam WebView, pendekatan berasaskan JavaScript mesti digunakan:

<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>

Kod yang dipertingkatkan ini membolehkan suntikan CSS dengan menggunakan JavaScript. Ia membaca fail style.css daripada folder aset, mengekodnya ke dalam Base64 dan membenamkannya ke dalam kepala dokumen HTML, membenarkan manipulasi gaya tapak web.

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