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

Question 1

我的应用程序正在使用JSoup下载留言板页面的HTML（在这种情况下，它是一个包含给定线程帖子的页面）。我想使用此HTML，剔除不需要的项目，并应用自定义CSS对其进行样式设置使其在WebView中“可移动”。

我应该在处理样式时将样式注入HTML中（因为无论如何都会处理样式），或者是否有很好的方法将CSS文件添加到我的应用程序资产中并简单地引用它。我认为后者将是理想的，但不确定如何去做。

我在WebView的loadDataWithBaseURL中看到了一些提示，您可以引用本地资产，但不确定如何使用它。

Question 2

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而且，是的，如果您从资产文件夹中加载html文件，则无需指定基本URL。

Question 3

我假设您的样式表“ 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);

Question 4

这是解决方案

将您的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" />

Question 5

就这么简单：

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

Question 6

如果您的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", "");

Question 7

是否可以在给定的div中将所有内容呈现在页面内？然后，您可以根据ID重置CSS，然后从那里开始。

假设您给div id =“ ocon”

在您的CSS中，定义如下：

#ocon *{background:none;padding:0;etc,etc,}

并且您可以设置值以清除所有CSS，使其不再应用于内容。之后，您可以使用

#ocon ul{}

或其他方式，在样式表的下方，将新样式应用于内容。

Question 8

您可以使用Online 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为样式附加字符串。

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());