Bagaimana untuk Mengubah Suai Penampilan Laman Web yang Dipaparkan dalam WebView?

Menyuntik CSS ke dalam Laman Web yang Dipaparkan dalam WebView

Masalah:

Anda perlu mengubah suai penampilan tapak web dipaparkan dalam WebView (cth., tukar warna latar belakang www.google.com kepada merah). Percubaan anda untuk menyuntik fail style.css daripada folder aset ke dalam www.google.com tidak berjaya.

Penyelesaian:

Tidak boleh menyuntik CSS secara langsung ke tapak web yang dipaparkan dalam WebView. Sebaliknya, anda boleh menggunakan JavaScript untuk memanipulasi Model Objek Dokumen (DOM) halaman.

Berikut ialah kod yang diperbetulkan untuk menyuntik CSS:

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

  WebView webView;

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

    webView = new WebView(this);
    setContentView(webView);

    // Enable Javascript
    webView.getSettings().setJavaScriptEnabled(true);

    // Add a WebViewClient
    webView.setWebViewClient(new WebViewClient() {

        @Override
        public void onPageFinished(WebView view, String url) {

            // Inject CSS when page is done loading
            injectCSS();
            super.onPageFinished(view, url);
        }
    });

    // Load a webpage
    webView.loadUrl("https://www.google.com");
  }

  // Inject CSS method: read style.css from assets folder
  // Append stylesheet to document head
  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';" +
                // Tell the browser to BASE64-decode the string into your script !!!
                "style.innerHTML = window.atob('" + encoded + "');" +
                "parent.appendChild(style)" +
                "})()");
    } catch (Exception e) {
        e.printStackTrace();
    }
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
  }
}</code>

Penjelasan:

1. Dayakan JavaScript pada WebView.
2. Tambah WebViewClient untuk memantau apabila halaman telah selesai dimuatkan.
3. Tentukan kaedah injectCSS() yang membaca fail style.css daripada folder aset, mengodkannya menggunakan Base64 dan menyuntiknya ke dalam kepala dokumen menggunakan JavaScript.
4. Panggil injectCSS() apabila halaman selesai dimuatkan.

Pendekatan ini menggunakan JavaScript untuk mengubah suai DOM tapak web yang dipaparkan dalam WebView, dengan berkesan membolehkan anda menyuntik gaya CSS ke dalam halaman.

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