首頁 > web前端 > css教學 > 主體

如何修改WebView中顯示的網站的外觀?

Mary-Kate Olsen
發布: 2024-10-30 01:58:28
原創
976 人瀏覽過

How to Modify the Appearance of a Website Displayed in a WebView?

將CSS注入到WebView中顯示的網站

問題:

您需要修改網站的外觀顯示在WebView中(例如,將www.google.com 的背景顏色變更為紅色)。您嘗試將 asset 資料夾中的 style.css 檔案注入 www.google.com 失敗。

解:

無法將 CSS 直接注入到以網頁檢視。相反,您可以使用 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() 方法從assets資料夾中獲取,使用Base64編碼,並使用JavaScript將其註入文件頭。
  4. 頁面載入完成後呼叫injectCSS()。

此方法使用JavaScript修改 WebView 中顯示的網站的 DOM,有效地允許您將 CSS 樣式註入到頁面中。

以上是如何修改WebView中顯示的網站的外觀?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!