使用自定义CSS在WebView中呈现HTML

Question

我的应用程序正在使用JSoup下载留言板页面的HTML(假设在这种情况下它是一个包含给定线程的帖子的页面).我想使用这个HTML,删除不需要的项目,并应用自定义CSS将其设置为在WebView中"移动".

我应该在处理HTML时将样式注入到HTML中(因为我还是会处理它),或者有一种很好的方法可以将CSS文件添加到我的应用程序的资源中并简单地引用它.我认为后者是理想的,但不确定如何去做.

我在WebView的loadDataWithBaseURL中看到了一些提示,你可以引用本地资产,但不知道如何利用它.

Answer 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才能够从资产目录中查找和使用css文件.

ps并且,是的,如果您从assets文件夹加载html文件,则无需指定基本URL.

Answer 2

我假设您的样式表"style.css"已经位于assets-folder中

1. 使用jsoup加载网页:

   doc = Jsoup.connect("http://....").get();
   

2. 删除外部样式表的链接:

   // remove links to external style-sheets
   doc.head().getElementsByTag("link").remove();
   

3. 设置本地样式表的链接:

   // 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");
   

4. 从jsoup-doc/web-page制作字符串:

   String htmldata = doc.outerHtml();
   

5. 在webview中显示网页:

   WebView webview = new WebView(this);
   setContentView(webview);
   webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);
   

Answer 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" />

Answer 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" />