如何将自定义 CSS 注入到 Android 上 WebView 中显示的网站中？
- Mary-Kate Olsen原创
- 2024-10-28 20:17:02892浏览
在 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