Отрисовка HTML в WebView с помощью настраиваемого CSS

Question 1

Мое приложение использует JSoup для загрузки HTML-кода страницы доски объявлений (скажем, в данном случае это страница, содержащая сообщения данной темы). Я хотел бы взять этот HTML, вырезать ненужные элементы и применить собственный CSS, чтобы сделать его «мобильным» в WebView.

Должен ли я вставлять стили в HTML по мере его обработки (поскольку я все равно буду его обрабатывать) или есть хороший способ добавить файл CSS в ресурсы моего приложения и просто сослаться на него. Я полагаю, что последнее было бы идеально, но не знаю, как это сделать.

Я вижу подсказки в loadDataWithBaseURL WebView, что вы можете ссылаться на локальные ресурсы, но не знаете, как их использовать.

Question 2

Вы можете использовать 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 И, да, если вы загружаете свой 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-страницы:
```
String htmldata = doc.outerHtml();
```

отображать веб-страницу в веб-просмотре:

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? Затем вы можете сбросить CSS на основе идентификатора и продолжить работу оттуда.

Допустим, вы указываете свой div id = "ocon"

В вашем css есть такое определение:

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

и вы можете установить значения, чтобы очистить все CSS от применения к контенту. После этого вы можете просто использовать

#ocon ul{}

или что-то еще ниже по таблице стилей, чтобы применить новые стили к содержимому.

Question 8

Вы можете использовать онлайн-ссылку Css, чтобы установить стиль поверх существующего содержимого.

Для этого вам необходимо загрузить данные в веб-просмотр и включить поддержку 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());