Rendern von HTML in einer WebView mit benutzerdefiniertem CSS

81

Meine App verwendet JSoup, um den HTML-Code einer Message Board-Seite herunterzuladen (in diesem Fall handelt es sich um eine Seite, die die Beiträge eines bestimmten Threads enthält). Ich möchte diesen HTML-Code verwenden, unerwünschte Elemente entfernen und benutzerdefiniertes CSS anwenden, um ihn so zu gestalten, dass er in einer WebView "mobil" ist.

Sollte ich die Stile während der Verarbeitung in den HTML-Code einfügen (da ich sie sowieso verarbeiten werde) oder gibt es eine gute Möglichkeit, eine CSS-Datei zu den Assets meiner App hinzuzufügen und einfach darauf zu verweisen. Ich denke, letzteres wäre ideal, aber ich bin mir nicht sicher, wie ich es anstellen soll.

Ich sehe in loadVataWithBaseURL von WebView Hinweise, dass Sie auf lokale Assets verweisen können, aber nicht sicher sind, wie Sie sie verwenden sollen.

android  html  css  webview 
— thedude19
quelle

Antworten:

129

Sie können WebView.loadDataWithBaseURL verwenden

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

Und erst danach kann WebView CSS-Dateien aus dem Assets-Verzeichnis finden und verwenden.

ps Und ja, wenn Sie Ihre HTML-Datei aus dem Assets-Ordner laden, müssen Sie keine Basis-URL angeben.

— andrii
quelle
10
Vielen Dank! Das war genau das, was ich brauchte. (Übrigens können Sie für die Attribute im Inline-HTML einfache Anführungszeichen anstelle von doppelten Anführungszeichen verwenden. Auf diese Weise müssen Sie sie nicht rückgängig machen. Sieht für mich immer etwas aufgeräumter aus ...)
— Matt Gibson
2
Nett. Ich würde die PS als direkte Antwort setzen: Wenn Sie Ihre HTML-Datei mit WebView.loadUrl laden ("file: ///android_asset/fname.html"); Sie können einfach relative URLs darin verwenden.
— Fortboise
2
Wie können wir loadDataWithBaseURL () verwenden, wenn sich das Stylesheet im Dateispeicher befindet? können wir 'data / data / etc / "verwenden?
— Yasir
1
@Yasir, es funktioniert auch, wenn Ihre style.cssDatei im Android-Dateispeicher gespeichert ist. Sie müssen nur sicherstellen, dass dies baseUrlperfekt ist und mit dem cssrelativen Pfad der Dateien übereinstimmt .
— Sakiboy
2
Wenn Ihre Dateien der unformatierte Ordner sind und sich nicht in Assets befinden ( was Ihnen die Android-Lokalisierung ermöglicht), lautet die Basis-URL "file: /// android_res / raw /"
— Sebastian,
35

Ich gehe davon aus, dass sich Ihr Stylesheet "style.css" bereits im Assets-Ordner befindet

  1. Laden Sie die Webseite mit jsoup:

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

  2. Links zu externen Stylesheets entfernen:

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

  3. Link zum lokalen Stylesheet setzen:

    // 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. Zeichenfolge aus jsoup-doc / web-page erstellen:

    String htmldata = doc.outerHtml();

  5. Webseite in Webview anzeigen:

    WebView webview = new WebView(this);
setContentView(webview);
webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);
— Robert
quelle
schöne praktische Lösung, vergessen Sie nicht, das nicht in UI (Main) Thread zu verwenden.
— Ata Iravani
Ich möchte von einem anderen Modul aus auf style.css zugreifen. Wenn dies nicht möglich ist, gibt es eine andere Möglichkeit, den Stil als Zeichenfolge zu laden und dann an die Bibliotheksmodulklasse zu übergeben?
— Mahdi
22

Hier ist die Lösung

Legen Sie Ihre HTML- und CSS-Datei in Ihrem Ordner / assets / ab und laden Sie die HTML-Datei wie folgt:

    WebView wv = new WebView(this);

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

dann können Sie in Ihrem HTML auf Ihre CSS auf die übliche Weise verweisen

<link rel="stylesheet" type="text/css" href="main.css" />
— langhaarig
quelle
9

Es ist so einfach wie es ist:

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

Und Ihre some.html muss etwas enthalten wie:

<link rel="stylesheet" type="text/css" href="style.css" />
— egore911
quelle
2

Wenn Sie Ihr CSS im internen Dateispeicher haben, können Sie es verwenden

//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
quelle
Das Beispiel webContenthier hat mich dazu gebracht, mein Problem zu lösen. Vielen Dank!
— JorgeAmVF
Ich bin froh, dass es @JorgeAmVF geholfen hat!
— Lejonl
1

Ist es möglich, den gesamten Inhalt in einem bestimmten Div auf einer Seite zu rendern? Sie können dann das CSS basierend auf der ID zurücksetzen und von dort aus weiterarbeiten.

Angenommen, Sie geben Ihre div id = "ocon"

Haben Sie in Ihrem CSS eine Definition wie:

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

und Sie können Werte festlegen, um zu verhindern, dass alle CSS auf den Inhalt angewendet werden. Danach können Sie einfach verwenden

#ocon ul{}

oder was auch immer, weiter unten im Stylesheet, um neue Stile auf den Inhalt anzuwenden.

— daveyfaherty
quelle
0

Sie können den Online-CSS-Link verwenden, um den Stil über vorhandenen Inhalten festzulegen.

Dazu müssen Sie Daten in die Webansicht laden und die JavaScript-Unterstützung aktivieren.

Siehe unten Code:

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

Verwenden Sie hier StringBuilder, um String für Style anzuhängen.

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
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.