首頁 >web前端 >css教學 >如何在 Android 中使用 WebView 將自訂 CSS 注入網站?

如何在 Android 中使用 WebView 將自訂 CSS 注入網站?

Susan Sarandon
Susan Sarandon原創
2024-11-01 06:21:31181瀏覽

How to Inject Custom CSS into a Website Using WebView in Android?

在Android 中使用WebView 將CSS 注入到網站中

無法將CSS 直接注入到透過WebView 顯示的網站中,可以進行操作使用JavaScript 的頁面DOM。方法如下:

1.在 WebView 中啟用 JavaScript:

<code class="java">webView.getSettings().setJavaScriptEnabled(true);</code>

2.添加WebViewClient:

<code class="java">webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        // Inject CSS when page is done loading
        injectCSS();
        super.onPageFinished(view, url);
    }
});</code>

3.載入網站:

<code class="java">webView.loadUrl("https://www.google.com");</code>

4.使用 JavaScript 注入CSS:

<code class="java">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';" +
                // Decode the CSS from BASE64
                "style.innerHTML = window.atob('" + encoded + "');" +
                "parent.appendChild(style)" +
                "})()");
    } catch (Exception e) {
        e.printStackTrace();
    }
}</code>

注意:

  • style.css 檔案應位於專案的 asset 資料夾中。
  • webView.loadUrl() 方法必須在 onPageFinished() 回調之後調用,因為在頁面加載之前註入 CSS 不會有任何效果。

以上是如何在 Android 中使用 WebView 將自訂 CSS 注入網站?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn