使用自定义 CSS 在 WebView 中呈现 HTML
Posted
技术标签:
【中文标题】使用自定义 CSS 在 WebView 中呈现 HTML【英文标题】：Rendering HTML in a WebView with custom CSS 【发布时间】：2011-06-24 10:58:46 【问题描述】：我的应用程序正在使用 JSoup 下载留言板页面的 html（假设在这种情况下，它是一个包含给定线程帖子的页面）。我想使用这个 HTML，去掉不需要的项目，并应用自定义 CSS 将其设置为 WebView 中的“移动”样式。
我应该在处理 HTML 时将样式注入到 HTML 中（因为无论如何我都会处理它），还是有一种好方法可以将 CSS 文件添加到我的应用资产并简单地引用它。我认为后者是理想的，但不确定如何去做。
我在 WebView 的 loadDataWithBaseURL 中看到提示，您可以参考本地资产，但不确定如何使用它。
【问题讨论】：
【参考方案1】：你可以使用WebView.loadDataWithBaseURL
htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + htmlData;
// lets assume we have /assets/style.css file
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
只有在此之后，WebView 才能从 assets 目录中找到并使用 css 文件。
ps 而且，是的，如果您从 assets 文件夹中加载 html 文件，则无需指定基本 url。
【讨论】：
谢谢！这正是我所需要的。 （顺便说一句，您可以在内联 HTML 中为属性使用单引号而不是双引号；这样您就不需要反斜杠了。对我来说总是看起来更整洁...） 不错。我会把 PS 作为直接答案：如果你用 WebView.loadUrl("file:///android_asset/fname.html"); 加载你的 html 文件。您可以简单地在其中使用相对 url。 如果样式表在文件存储中，我们如何使用 loadDataWithBaseURL()？我们可以使用“数据/数据/等/”吗？ @Yasir，即使您的style.css 文件保存在 android 文件存储中，它也可以工作。你只需要确保baseUrl 是完美的并且匹配css 文件的相对路径。
如果您的文件是原始文件夹而不是资产（which 为您提供 Android 本地化），则基本 URL 将为“file:///android_res/raw/”【参考方案2】：
我假设您的样式表“style.css”已经位于资产文件夹中
使用 jsoup 加载网页：
doc = Jsoup.connect("http://....").get();
删除指向外部样式表的链接：
// remove links to external style-sheets
doc.head().getElementsByTag("link").remove();
设置本地样式表的链接：
// set link to local stylesheet
// <link rel="stylesheet" type="text/css" href="style.css" />
doc.head().appendElement("link").attr("rel", "stylesheet").attr("type", "text/css").attr("href", "style.css");
从 jsoup-doc/web-page 生成字符串：
String htmldata = doc.outerHtml();
在 webview 中显示网页：
WebView webview = new WebView(this);
setContentView(webview);
webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);
【讨论】：
不错的实用解决方案，不要忘记不要在 UI（主）线程中使用它。 我想从另一个模块访问 style.css。如果这是不可能的，是否有另一种方法将样式加载为字符串然后传递给库模块类？【参考方案3】：解决办法
将你的 html 和 css 放在 /assets/ 文件夹中，然后像这样加载 html 文件：
WebView wv = new WebView(this);
wv.loadUrl("file:///android_asset/yourHtml.html");
然后在您的 html 中，您可以以通常的方式引用您的 css
<link rel="stylesheet" type="text/css" href="main.css" />
【讨论】：
【参考方案4】：就这么简单：
WebView webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/some.html");
而且您的 some.html 需要包含以下内容：
<link rel="stylesheet" type="text/css" href="style.css" />
【讨论】：
【参考方案5】：如果您的 CSS 在内部文件存储中，您可以使用
//Get a reference to your webview
WebView web = (WebView)findViewById(R.id.webby);
// Prepare some html, it is formated with css loaded from the file style.css
String webContent = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><link rel=\"stylesheet\" href=\"style.css\"></head>"
+ "<body><div class=\"running\">I am a text rendered with INDIGO</div></body></html>";
//get and format the path pointing to the internal storage
String internalFilePath = "file://" + getFilesDir().getAbsolutePath() + "/";
//load the html with the baseURL, all files relative to the baseURL will be found
web.loadDataWithBaseURL(internalFilePath, webContent, "text/html", "UTF-8", "");
【讨论】：
这里webContent的例子让我解决了我的问题。谢谢！
很高兴它帮助了@JorgeAmVF！【参考方案6】：
是否可以在给定的 div 中在页面内呈现所有内容？然后，您可以根据 id 重置 css，然后从那里开始工作。
假设你给你的 div id="ocon"
在你的 CSS 中，定义如下：
#ocon *background:none;padding:0;etc,etc,
并且您可以设置值以清除所有 css 应用于内容。 之后，您可以使用
#ocon ul
或其他任何东西，在样式表的下方，将新样式应用于内容。
【讨论】：
【参考方案7】：您可以使用在线 Css 链接在现有内容上设置样式。
为此，您必须在 webview 中加载数据并启用 javascript 支持。
见下面的代码：
WebSettings webSettings=web_desc.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDefaultTextEncodingName("utf-8");
webSettings.setTextZoom(55);
StringBuilder sb = new StringBuilder();
sb.append("<HTML><HEAD><LINK href=\" http://yourStyleshitDomain.com/css/mbl-view-content.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(currentHomeContent.getDescription());
sb.append("</body></HTML>");
currentWebView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html", "utf-8", null);
这里使用 StringBuilder 为 Style 添加字符串。
sb.append("<HTML><HEAD><LINK href=\" http://yourStyleshitDomain.com/css/mbl-view-content.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(currentHomeContent.getDescription());
【讨论】：
以上是关于使用自定义 CSS 在 WebView 中呈现 HTML的主要内容，如果未能解决你的问题，请参考以下文章
在用户交互之前，Android WebView 无法完全呈现内容
Xamarin.Forms自定义用户界面控件实现一个HybridWebView（混合webview）