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?

Susan Sarandon
Lepaskan: 2024-11-02 09:23:02
asal
688 orang telah melayarinya

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!

sumber:php.cn
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan