Bagaimana untuk Menyuntik CSS Tersuai ke dalam Laman Web Menggunakan WebView dalam Android?

Suntikan CSS ke dalam Tapak Web dengan WebView dalam Android

Dalam pengaturcaraan Android, memaparkan halaman web dalam aplikasi dicapai menggunakan WebView. Walau bagaimanapun, mungkin terdapat situasi di mana pembangun perlu mengubah suai penampilan halaman yang dipaparkan dengan menyuntik CSS tersuai.

Untuk menangani isu ini, seseorang tidak boleh menyuntik CSS secara langsung ke dalam halaman web dengan WebView. Sebagai penyelesaian, JavaScript boleh digunakan untuk memanipulasi Model Objek Dokumen (DOM) halaman.

Pertimbangkan kod semakan berikut untuk fail MainActivity.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);
  }
}

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