Le rendu HTML dans une WebView avec CSS personnalisé

Question

Mon application est à l'aide de JSoup pour télécharger le code HTML d'un message du conseil page (disons dans ce cas, c'est une page contenant les messages d'un fil). Je voudrais profiter de ce HTML, bande de hors éléments indésirables, et d'appliquer la coutume CSS pour le style "mobile" dans une WebView.

Doit-on injecter les styles dans le code HTML que j'processus (étant donné que je vais être le traitement de toute façon) ou est-il un bon moyen d'ajouter un fichier CSS pour mon application les actifs et simplement de les consulter. Je me figure le second serait l'idéal, mais ne savent pas comment aller à ce sujet.

Je vois des allusions dans WebView est loadDataWithBaseURL que vous pouvez vous référer à des valeurs locales, mais ne savez pas comment l'utiliser.

Answer 1

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 serez en mesure de trouver et d'utiliser les feuilles de style css fichiers à partir du répertoire actif.

ps Et, oui, si vous chargez votre html-fichier dans le dossier des ressources, vous n'avez pas besoin de spécifier une url de base.

Answer 2

je suppose que votre feuille de style "style.css" se trouve déjà dans les actifs-dossier

1. charger une page web avec jsoup:

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

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

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

3. définissez le lien locaux de feuille de style:

   // 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. faire de la chaîne de jsoup-doc/page web:

   String htmldata = doc.outerHtml();
   

5. affichage de la page web de webview:

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

Answer 3

voici la solution

Mettre votre code html et css dans votre /assets/ dossier, puis de charger le fichier html comme ceci:

    WebView wv = new WebView(this);

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

ensuite, dans votre code html, vous pouvez référencer votre css de la façon habituelle

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

Answer 4

C'est aussi simple que:

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

Answer 5

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

Dites que vous donnez à votre div id="ocon"

Dans votre css, ont une définition comme:

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

et vous pouvez définir des valeurs pour effacer tous les css à partir de l'application pour le contenu. Après, vous pouvez simplement utiliser

#ocon ul{}

ou que ce soit, en bas de la feuille de style, d'appliquer de nouveaux styles pour le contenu.