使用jsoup将自定义css添加到html代码中

I'm working on an Android app, which loads a HTML page and shows it in a webview. The problem is I want to add my custom css (the loaded HTML hasn't any CSS or link to a css). How do I add the custom css to the HTML code using jsoup? I cant modify the html. And how does the webview can open it afterwards? Thank you

我正在开发一个Android应用程序，它加载一个HTML页面并在webview中显示出来。问题是我想添加我的自定义css(加载的HTML没有css或css链接)。如何使用jsoup将自定义css添加到HTML代码中?我不能修改html。webview之后如何打开它呢?谢谢你！

3 个解决方案

#1

Several ways. You can use Element#append() to append some piece of HTML to the element.

几种方式。可以使用元素#append()向元素添加一些HTML。

Document document = Jsoup.connect(url).get();
Element head = document.head();
head.append("<link rel=\"stylesheet\" href=\"http://example.com/your.css\">");

Or, use Element#attr(name, value) to add attributes to existing elements. Here's an example which adds style="color:pink;" to all links.

或者，使用元素#attr(名称、值)向现有元素添加属性。下面是一个将style="color:pink "添加到所有链接的例子。

Document document = Jsoup.connect(url).get();
Elements links = document.select("a");
links.attr("style", "color:pink;");

Either way, after modification get the final HTML string by Document#html().

无论哪种方式，在修改之后，通过文档# HTML()获得最终的HTML字符串。

String html = document.html();

Write it to file by PrintWriter#write() (with the right charset).

通过PrintWriter# Write()(使用正确的字符集)将其写入文件。

String charset = Jsoup.connect(url).response().charset();
// ...
Writer writer = new PrintWriter("/file.html", charset);
writer.write(html);
writer.close();

Finally open it in the webview. Since I can't tell it from top of head, here's just a link with an example which I think is helpful: WebViewDemo.java. I found the link on this blog by the way (which I in turn found by Google).

最后在webview中打开它。因为我无法从头脑中分辨出来，这里有一个链接，上面有一个我认为很有用的例子:WebViewDemo.java。顺便说一下，我在这个博客上找到了这个链接(我也在谷歌上找到了这个链接)。

#2

Probably the easiest way is to search and replace on the HTML text to insert your custom styles, before loading it into your WebView. I do this in my app BBC News to restyle the news article page slightly. My code looks like this:

可能最简单的方法是在HTML文本上搜索和替换，在将其加载到WebView之前插入自定义样式。我在我的应用BBC新闻中这样做，以稍微重新设计新闻文章页面。我的代码是这样的:

text = text.replace("</head>",
        "<style>h1 {font-size: x-large;} h1, div.date, div.storybody, img {margin:4px; padding:4px; line-height:1.25;}</style></head>");

See how I search and replace on the end head tag (including my own </head> tag in the replaced segment. This ensures that the new snippet goes in the right pace on the page.

查看如何搜索和替换末端头标记(包括我自己的标记在替换的段中)。这确保了新代码片段在页面上以正确的速度运行。

#3

There a a few ways to include ccs in html

在html中包含ccs有几种方法

Tis i use if you have it stored as a external file:

如果您将它作为外部文件存储，我将使用:

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

If You want to put it stight i the html file:

如果你想把它设置为html文件:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Or if you wnat to modify a singel tag:

或者，如果您想修改一个singel标记:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

*Edit

*编辑

Any of thees examples shouldn't have any problem whit displaying.

任何一个例子在显示时都不应该有任何问题。

Ref: W3 Schools CSS

裁判:W3学校CSS

#1