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

82

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

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

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

android html css webview thedude19
источник

Ответы:

129

Вы можете использовать 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.

Андрей
источник
10
Благодаря! Это было именно то, что мне было нужно. (Между прочим, вы можете использовать одинарные кавычки для атрибутов во встроенном HTML вместо двойных кавычек; таким образом вам не нужно будет использовать обратную косую черту. Мне всегда кажется немного аккуратнее ...)
Мэтт Гибсон,
2
Ницца. Я бы поставил PS как прямой ответ: если вы загрузите свой html-файл с помощью WebView.loadUrl ("file: ///android_asset/fname.html"); вы можете просто использовать в нем относительные URL-адреса.
fortboise
2
Как мы можем использовать loadDataWithBaseURL (), если таблица стилей находится в файловом хранилище? можем ли мы использовать 'data / data / etc / "?
Ясир
1
@Yasir, он работает, даже если ваш style.cssфайл сохранен в хранилище файлов Android. Вам просто нужно убедиться, что baseUrlон идеален и соответствует cssотносительному пути к файлам.
Сакибой,
2
Если ваши файлы находятся в необработанной папке, а не в ресурсах ( что дает вам локализацию для Android), базовым URL-адресом будет «file: /// android_res / raw /»
Себастьян
35

Я предполагаю, что ваша таблица стилей style.css уже находится в папке с ресурсами

  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-страницы:

    String htmldata = doc.outerHtml();

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

    WebView webview = new WebView(this);
setContentView(webview);
webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);
Роберт
источник
хорошее практическое решение, не забудьте не использовать его в потоке UI (Main).
Ата
Я хочу получить доступ к style.css из другого модуля. Если это невозможно, есть ли другой способ загрузить стиль как строку, а затем перейти к классу библиотечного модуля?
Махди
22

вот решение

Поместите свои 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" />
длинношерстный
источник
9

Это так просто:

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" />
egore911
источник
2

Если у вас есть 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", "");
Lejonl
источник
Пример webContentздесь заставил меня решить мою проблему. Благодаря!
JorgeAmVF
Рад, что помог @JorgeAmVF!
lejonl
1

Возможно ли, чтобы весь контент отображался на странице в данном div? Затем вы можете сбросить CSS на основе идентификатора и продолжить работу оттуда.

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

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

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

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

#ocon ul{}

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

Дэвифахерти
источник
0

Вы можете использовать онлайн-ссылку 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());
КодВнутриКофе
источник