Renderowanie HTML w WebView z niestandardowym CSS

82

Moja aplikacja używa JSoup do pobrania kodu HTML strony forum dyskusyjnego (powiedzmy w tym przypadku jest to strona zawierająca posty z danego wątku). Chciałbym pobrać ten kod HTML, usunąć niechciane elementy i zastosować niestandardowy CSS, aby nadać mu styl „mobilny” w WebView.

Czy powinienem wstrzyknąć style do kodu HTML podczas jego przetwarzania (ponieważ i tak będę go przetwarzać), czy też jest dobry sposób na dodanie pliku CSS do zasobów mojej aplikacji i po prostu odwołanie się do niego. Wydaje mi się, że to drugie byłoby idealne, ale nie wiem, jak się do tego zabrać.

Widzę wskazówki w loadDataWithBaseURL WebView, które można odnieść do zasobów lokalnych, ale nie wiem, jak je wykorzystać.

android html css webview thedude19
źródło

Odpowiedzi:

129

Możesz użyć 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);

Dopiero potem WebView będzie mógł znaleźć i używać plików css z katalogu zasobów.

ps I tak, jeśli załadujesz swój plik html z folderu zasobów, nie musisz określać podstawowego adresu URL.

andrii
źródło
10
Dzięki! Właśnie tego potrzebowałem. (Nawiasem mówiąc, możesz użyć pojedynczych cudzysłowów dla atrybutów w wbudowanym HTML zamiast podwójnych cudzysłowów; w ten sposób nie będziesz musiał ich używać odwrotnego ukośnika. Zawsze wygląda dla mnie trochę porządniej ...)
Matt Gibson
2
Miły. Postawiłbym PS jako bezpośrednią odpowiedź: Jeśli załadujesz swój plik html za pomocą WebView.loadUrl ("file: ///android_asset/fname.html"); możesz po prostu użyć w nim względnych adresów URL.
fortboise
2
Jak możemy użyć loadDataWithBaseURL (), jeśli arkusz stylów znajduje się w magazynie plików? czy możemy użyć „data / data / etc /”?
Yasir,
1
@Yasir, działa, nawet jeśli style.cssplik jest zapisany w pamięci plików Androida. Musisz tylko upewnić się, że baseUrljest idealny i pasuje do cssścieżki względnej plików.
Sakiboy,
2
Jeśli Twoje pliki są w folderze raw, a nie w zasobach ( co daje lokalizację dla Androida), podstawowy adres URL będzie wyglądał następująco: „file: /// android_res / raw /”
Sebastian
35

Zakładam, że Twój arkusz stylów „style.css” znajduje się już w folderze zasobów

  1. załaduj stronę internetową za pomocą jsoup:

    doc = Jsoup.connect("http://....").get();

  2. usuń łącza do zewnętrznych arkuszy stylów:

    // remove links to external style-sheets
doc.head().getElementsByTag("link").remove();

  3. ustaw łącze do lokalnego arkusza stylów:

    // 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. stwórz ciąg z jsoup-doc / web-page:

    String htmldata = doc.outerHtml();

  5. wyświetl stronę internetową w widoku WWW:

    WebView webview = new WebView(this);
setContentView(webview);
webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);
Robert
źródło
fajne praktyczne rozwiązanie, nie zapomnij nie używać tego w wątku UI (głównym).
Ata Iravani
Chcę uzyskać dostęp do style.css z innego modułu. Jeśli jest to niemożliwe, czy istnieje inny sposób załadowania stylu jako ciągu znaków, a następnie przekazania do klasy modułu biblioteki?
Mahdi,
22

tutaj jest rozwiązanie

Umieść swój html i css w swoim folderze / asset /, a następnie załaduj plik html w następujący sposób:

    WebView wv = new WebView(this);

    wv.loadUrl("file:///android_asset/yourHtml.html");

następnie w swoim html możesz odwołać się do swojego css w zwykły sposób

<link rel="stylesheet" type="text/css" href="main.css" />
longhairedsi
źródło
9

To bardzo proste:

WebView webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/some.html");

Twój some.html musi zawierać coś takiego:

<link rel="stylesheet" type="text/css" href="style.css" />
egore911
źródło
2

Jeśli masz CSS w wewnętrznej pamięci plików, możesz użyć

//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
źródło
Przykład webContenttutaj skłonił mnie do rozwiązania mojego problemu. Dzięki!
JorgeAmVF
Cieszę się, że pomogło @JorgeAmVF!
lejonl
1

Czy jest możliwe, aby cała zawartość była renderowana na stronie, w danym elemencie div? Następnie możesz zresetować css na podstawie identyfikatora i kontynuować od tego momentu.

Powiedz, że nadajesz swojemu identyfikatorowi div = „ocon”

W swoim css miej definicję taką jak:

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

i możesz ustawić wartości, aby usunąć wszystkie css z zastosowania do zawartości. Następnie możesz po prostu użyć

#ocon ul{}

lub cokolwiek innego, dalej w arkuszu stylów, aby zastosować nowe style do treści.

daveyfaherty
źródło
0

Możesz użyć łącza Css online, aby ustawić styl na istniejącą zawartość.

W tym celu musisz załadować dane w widoku internetowym i włączyć obsługę JavaScript.

Zobacz poniższy kod:

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

Tutaj użyj StringBuilder, aby dołączyć ciąg dla Style.

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());
CodeInsideCoffee
źródło