Rumah hujung hadapan web tutorial css Bagaimana untuk Menyuntik CSS ke dalam Laman Web yang Dipaparkan dalam Android WebView?

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

Nov 02, 2024 am 09:23 AM

How to Inject CSS into a Website Displayed in an 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>
Salin selepas log masuk

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!

Kenyataan Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma