WebView に表示される Web サイトの外観を変更するにはどうすればよいですか?

WebView に表示される Web サイトへの CSS の挿入

問題:

Web サイトの外観を変更する必要がありますWebView に表示されます (例: www.google.com の背景色を赤に変更します)。アセット フォルダから www.google.com に style.css ファイルを挿入しようとしましたが、失敗しました。

解決策:

Web サイトに CSS を直接挿入することはできません。 Webビュー。代わりに、JavaScript を使用してページのドキュメント オブジェクト モデル (DOM) を操作できます。

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>

説明:

1. WebView で JavaScript を有効にします。
2. ページの読み込み完了を監視する WebViewClient を追加します。
3. style.css ファイルを読み取る injectCSS() メソッドを定義します。アセット フォルダーから取得し、Base64 を使用してエンコードし、JavaScript を使用してドキュメントのヘッドに挿入します。
4. ページの読み込みが完了したら、injectCSS() を呼び出します。

このアプローチでは JavaScript を使用します。 WebView に表示される Web サイトの DOM を変更し、CSS スタイルをページに効果的に挿入できるようにします。

以上がWebView に表示される Web サイトの外観を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。