ホームページ >ウェブフロントエンド >CSSチュートリアル >Android の WebView に表示される Web サイトにカスタム CSS を挿入するにはどうすればよいですか?
Android の WebView に表示される Web サイトにカスタム CSS を挿入するにはどうすればよいですか?
- Mary-Kate Olsenオリジナル
- 2024-10-28 20:17:02944ブラウズ
Android で WebView を使用して Web サイトに CSS を組み込む
Web ビュー内に表示される Web サイトにカスタム CSS を挿入すると、ユーザー エクスペリエンスを向上させることができます。この記事では、Android デバイスの Web ビューに表示される Web ページに CSS を挿入する方法について説明します。
問題の説明
あなたの目標は、www の背景色を変更することです。 .google.com を赤にします。アセット フォルダーにある style.css という名前のファイルから CSS を挿入しようとしましたが、コードが機能しません。
間違ったコード
間違ったコードです提供:
String html = "<html><head><style> src: url('file:///android_asset/style.css')</style></head></html>";
webView.loadData(html, "text/html", "utf-8");
webView.loadUrl("https://www.google.com");
正しい解決策
CSS を Web ページに直接挿入することはできません。ただし、JavaScript を使用してページの DOM を操作することはできます。修正されたコードは次のとおりです。
// MainActivity.java
...
// 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);
}
});
...
// 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();
}
}
このコードは、Web ページに CSS を挿入する前にページの読み込みが完了するのを待つ WebViewClient を設定します。 injectCSS() メソッドは、アセット フォルダーから CSS ファイルを読み取り、Base64 でエンコードした後、JavaScript を使用してスタイルシートを Web ページのドキュメント ヘッドに追加します。
以上がAndroid の WebView に表示される Web サイトにカスタム CSS を挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。