Representación de HTML en un WebView con CSS personalizado

81

Mi aplicación está usando JSoup para descargar el HTML de una página de tablero de mensajes (digamos que en este caso es una página que contiene las publicaciones de un hilo dado). Me gustaría tomar este HTML, eliminar los elementos no deseados y aplicar CSS personalizado para diseñarlo para que sea 'móvil' en un WebView.

¿Debo inyectar los estilos en el HTML a medida que lo proceso (ya que lo procesaré de todos modos) o hay una buena manera de agregar un archivo CSS a los activos de mi aplicación y simplemente hacer referencia a él? Supongo que lo último sería ideal, pero no estoy seguro de cómo hacerlo.

Veo sugerencias en loadDataWithBaseURL de WebView de que puede hacer referencia a activos locales, pero no estoy seguro de cómo utilizarlo.

android html css webview thedude19
fuente

Respuestas:

129

Podría usar 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);

Y solo después de eso, WebView podrá encontrar y usar archivos css desde el directorio de activos.

ps Y, sí, si carga su archivo html desde la carpeta de activos, no necesita especificar una URL base.

andrii
fuente
10
¡Gracias! Eso era justo lo que necesitaba. (Por cierto, puede utilizar comillas simples para los atributos en el HTML en línea en lugar de comillas dobles;. De esa manera usted no tendrá que barra invertida ellos siempre se ve un poco más ordenado para mí ...)
Matt Gibson
2
Agradable. Yo pondría el PS como la respuesta directa: Si carga su archivo html con WebView.loadUrl ("file: ///android_asset/fname.html"); simplemente puede usar URL relativas dentro de él.
fortboise
2
¿Cómo podemos usar loadDataWithBaseURL () si la hoja de estilo está en el almacenamiento de archivos? ¿Podemos usar 'data / data / etc / "?
Yasir
1
@Yasir, funciona incluso si su style.cssarchivo está guardado en el almacenamiento de archivos de Android. Solo necesita asegurarse de que baseUrlsea ​​perfecto y coincida con la cssruta relativa de los archivos.
Sakiboy
2
Si sus archivos están en la carpeta sin procesar y no en los activos (lo que le brinda la localización de Android), la URL base sería "file: /// android_res / raw /"
Sebastian
35

Supongo que su hoja de estilo "style.css" ya se encuentra en la carpeta assets

  1. cargue la página web con jsoup:

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

  2. eliminar enlaces a hojas de estilo externas:

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

  3. establecer enlace a la hoja de estilo local:

    // 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. hacer una cadena de jsoup-doc / web-page:

    String htmldata = doc.outerHtml();

  5. mostrar la página web en la vista web:

    WebView webview = new WebView(this);
setContentView(webview);
webview.loadDataWithBaseURL("file:///android_asset/.", htmlData, "text/html", "UTF-8", null);
Robert
fuente
Buena solución práctica, no olvides no usarla en el hilo de la interfaz de usuario (principal).
Ata Iravani
Quiero acceder a style.css desde otro módulo. Si esto es imposible, ¿hay otra forma de cargar el estilo como cadena y luego pasar a la clase de módulo de biblioteca?
Mahdi
22

aqui esta la solucion

Coloque su html y css en su carpeta / assets /, luego cargue el archivo html así:

    WebView wv = new WebView(this);

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

luego en su html puede hacer referencia a su css de la manera habitual

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

Es tan simple como es:

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

Y su some.html debe contener algo como:

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

Si tiene su CSS en el almacenamiento de archivos interno, puede usar

//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
fuente
El ejemplo de webContentaquí me hizo resolver mi problema. ¡Gracias!
JorgeAmVF
¡Me alegro de haber ayudado a @JorgeAmVF!
lejonl
1

¿Es posible tener todo el contenido renderizado en la página, en un div dado? Luego, puede restablecer el CSS en función de la identificación y trabajar desde allí.

Digamos que da su div id = "ocon"

En su css, tenga una definición como:

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

y puede establecer valores para borrar todos los css de aplicar al contenido. Después de eso, puedes usar

#ocon ul{}

o lo que sea, más abajo en la hoja de estilo, para aplicar nuevos estilos al contenido.

Daveyfaherty
fuente
0

Puede usar el enlace Css en línea para establecer el estilo sobre el contenido existente.

Para eso, debe cargar datos en la vista web y habilitar el soporte de JavaScript.

Ver código a continuación:

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

Aquí Use StringBuilder para agregar String for 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());
Código Interior Café
fuente