Android で WebView を使用してカスタム CSS を Web サイトに挿入する方法-CSSチュートリアル-php.cn

Android で WebView を使用してカスタム CSS を Web サイトに挿入する方法

Susan Sarandon

リリース： 2024-11-01 06:21:31

オリジナル

192 人が閲覧しました

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

Android の WebView を使用して Web サイトに CSS を挿入する

WebView を通じて表示される Web サイトに CSS を直接挿入することはできませんが、操作することは可能です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. Web サイトをロードします:

<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>

ログイン後にコピー

注: