Добавьте пользовательский css в html-код с помощью jsoup

Я работаю над Android-приложением, которое загружает HTML-страницу и показывает ее в webview. Проблема в том, что я хочу добавить свой пользовательский css (загруженный HTML не имеет CSS или ссылки на css). Как добавить пользовательский css в HTML-код с помощью jsoup? Я не могу изменить HTML. И как webview может открыть его после этого? Спасибо

9
android css java jquery jsoup

3 ответов

несколько способов. Вы можете использовать Element#append() добавить кусок HTML в элемент.

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

или Element#attr(name, value) добавление атрибутов к существующим элементам. Вот пример, который добавляет style="color:pink;" для всех ссылок.

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

в любом случае, после модификации получите окончательную строку HTML по Document#html().

String html = document.html();

запишите его в файл по PrintWriter#write() (справа набор символов.)

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

наконец, откройте его в webview. Поскольку я не могу сказать это с головы, вот только ссылка с примером, который я думаю, полезен:WebViewDemo.java. Я нашел ссылку на этот блог кстати (который я в свою очередь нашел в Google).

18

вероятно, самый простой способ-найти и заменить HTML-текст, чтобы вставить пользовательские стили, прежде чем загружать его в свой WebView. Я делаю это в своем приложении BBC News, чтобы немного изменить стиль страницы новостной статьи. Мой код выглядит так:

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

посмотрите, как я ищу и заменяю в конце head тег (включая мой собственный </head> - тег в замене сегмента. Это гарантирует, что новый фрагмент идет в правильном темпе на странице.

3

есть несколько способов включить ccs в html

Tis я использую, если у вас он хранится как внешний файл:

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

Если вы хотите, чтобы положить его stight я HTML-файл:

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

или если вы хотите изменить тег singel:

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

*редактировать

любой из примеров thees не должен иметь никаких проблем с отображением.

Ref:W3 школы CSS

1