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

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>

注:

• style.css ファイルはプロジェクトのアセット フォルダーにある必要があります。
• ページが読み込まれる前に CSS を挿入しても効果がないため、webView.loadUrl() メソッドは onPageFinished() コールバックの後に呼び出す必要があります。

以上がAndroid で WebView を使用してカスタム CSS を Web サイトに挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。