如何將自訂 CSS 注入到 Android 上 WebView 中顯示的網站中？
- Mary-Kate Olsen原創
- 2024-10-28 20:17:02944瀏覽
在Android 中使用WebView 將CSS 合併到網站中
將自訂CSS 注入到Web 視圖中顯示的網站可以增強用戶體驗。本文討論了一種在 Android 裝置上的 webview 中顯示的網頁中註入 CSS 的方法。
問題描述
您的目標是修改 www 的背景顏色.google.com 變成紅色。您嘗試從 asset 資料夾中名為 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不能直接注入網頁；但是，您可以使用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();
}
}
此程式碼設定一個 WebViewClient，等待頁面完成加載，然後再將 CSS 注入網頁。 jectCSS() 方法從 asset 資料夾讀取 CSS 文件，將其編碼為 Base64，然後使用 JavaScript 將樣式表附加到網頁的文檔頭。
以上是如何將自訂 CSS 注入到 Android 上 WebView 中顯示的網站中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn