web-dev-qa-db-fra.com

Rendu HTML dans une vue Web avec CSS personnalisé

Mon application utilise JSoup pour télécharger le code HTML d'une page de forum (disons dans ce cas, il s'agit d'une page contenant les publications d'un fil de discussion donné). J'aimerais prendre ce code HTML, supprimer les éléments non souhaités et appliquer un code CSS personnalisé pour le définir comme "mobile" dans une vue Web.

Devrais-je injecter les styles dans le code HTML au fur et à mesure que je le traite (puisque je le traiterai quand même) ou existe-t-il un bon moyen d'ajouter un fichier CSS aux ressources de mon application et de simplement y faire référence? Je pense que ce dernier serait idéal, mais je ne sais pas comment s'y prendre.

Je vois des astuces dans la WebView loadDataWithBaseURL selon lesquelles vous pouvez faire référence à des ressources locales, mais vous ne savez pas comment vous en servir.

androidhtmlcsswebview
77
thedude19

Vous pouvez utiliser 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);

Et seulement après que WebView sera capable de trouver et d’utiliser des fichiers css à partir du répertoire assets.

ps Et, oui, si vous chargez votre fichier HTML dans le dossier assets, vous n'avez pas besoin de spécifier une URL de base.

117
andrii

Je suppose que votre feuille de style "style.css" se trouve déjà dans le dossier assets

  1. chargez la page Web avec jsoup:

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

  2. supprimer les liens vers les feuilles de style externes:

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

  3. définir le lien vers la feuille de style locale:

    // 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. make string à partir de jsoup-doc/web-page:

    String htmldata = doc.outerHtml();

  5. afficher une page Web dans une vue Web:

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

voici la solution

Placez vos fichiers html et css dans votre dossier/assets /, puis chargez le fichier html de la manière suivante:

    WebView wv = new WebView(this);

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

alors dans votre html vous pouvez référencer votre css de la manière habituelle

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

C'est aussi simple que c'est:

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

Et votre some.html doit contenir quelque chose comme:

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

Si vous avez votre CSS dans le stockage de fichiers interne, vous pouvez utiliser

//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

Est-il possible d'avoir tout le contenu rendu dans la page, dans un div donné? Vous pouvez ensuite réinitialiser le fichier css en fonction de l'id et travailler à partir de là.

Dites que vous donnez votre div id = "ocon"

Dans votre css, définissez comme suit:

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

et vous pouvez définir des valeurs pour effacer tous les CSS de l'application au contenu. Après cela, vous pouvez simplement utiliser

#ocon ul{}

ou peu importe, plus loin dans la feuille de style, pour appliquer de nouveaux styles au contenu.

1
daveyfaherty