webentwicklung-frage-antwort-db.com.de

HTML in einer WebView mit benutzerdefiniertem CSS rendern

Meine App verwendet JSoup, um den HTML-Code einer Message Board-Seite herunterzuladen (in diesem Fall handelt es sich beispielsweise 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 in einer WebView "mobil" zu gestalten.

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

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

77
thedude19

Sie könnten 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.

117
andrii

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

  1. lade 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 auf lokales 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. erstelle einen String aus jsoup-doc/web-page:

    String htmldata = doc.outerHtml();
    
  5. webseite in der Webansicht anzeigen:

    WebView webview = new WebView(this);
    setContentView(webview);
    webview.loadDataWithBaseURL("file:///Android_asset/.", htmlData, "text/html", "UTF-8", null);
    
35
Robert

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-Code wie gewohnt auf Ihren CSS-Code verweisen

<link rel="stylesheet" type="text/css" href="main.css" />
21
longhairedsi

So einfach ist das:

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

Und Ihre some.html muss Folgendes enthalten:

<link rel="stylesheet" type="text/css" href="style.css" />
9
egore911

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", "");
2
lejonl

Ist es möglich, den gesamten Inhalt auf einer Seite in einem bestimmten Div zu rendern? Sie könnten 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-Dateien 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.

1
daveyfaherty