Візуалізація 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 Online, щоб встановити стиль для наявного вмісту.

Для цього вам потрібно завантажити дані у веб-перегляді та увімкнути підтримку 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, щоб додати String для стилю.

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