Renderizar HTML en un WebView con CSS personalizado

Mi aplicación usa 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 determinado). Me gustaría tomar este HTML, quitar elementos no deseados y aplicar un CSS personalizado para que sea 'móvil' en un WebView.Renderizar HTML en un WebView con CSS personalizado

Debería inyectar los estilos en el HTML mientras lo proceso (ya que lo procesaré de todos modos) o hay una buena manera de agregar un archivo CSS a los recursos de mi aplicación y simplemente consultarlo. Me imagino que este último sería ideal, pero no estoy seguro de cómo hacerlo.

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

Fuente

2011-02-09 thedude19

103

Usted podría utilizar 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 sólo después de que la vista web será capaz de encontrar y utilizar CSS-archivos de los activos directorio.

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

Fuente

2011-12-03 17:17:31

Gracias! Eso era justo lo que necesitaba. (Por cierto, puede usar comillas simples para los atributos en el HTML en línea en lugar de comillas dobles, de esa manera no tendrá que hacer una barra invertida. Siempre me parece un poco más ordenado ...) –

Agradable. Yo pondría el PS como respuesta directa: si carga su archivo html con WebView.loadUrl ("file: ///android_asset/fname.html"); simplemente puede usar las URL relativas dentro de ella. – fortboise

¿Cómo podemos usar loadDataWithBaseURL() si la hoja de estilo está en el almacenamiento de archivos? ¿podemos usar 'data/data/etc /?' – Yasir

¿Es posible tener todo el contenido procesado in-page, en un div determinado? A continuación, puede restablecer el CSS basado en el ID, y continuar desde allí.

Digamos que da a su div id = "ocon"

En el CSS, tener una definición como:

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

y se puede establecer valores para borrar todos los CSS de aplicar al contenido. Después de eso, sólo puede utilizar

#ocon ul{}

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

Fuente

2011-02-09 22:35:29 daveyfaherty

Aquí está la solución

Ponga su html y css en su/activos/carpeta, a continuación, cargar el archivo html, así:

WebView wv = new WebView(this); 

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

después en su html puede hacer referencia a su css en el forma habitual

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

Fuente

2011-03-10 16:34:55 longhairedsi

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

Fuente

2011-11-30 15:18:12 egore911

supongo que su estilo de hoja de estilo ".css" ya se encuentra en el patrimonio-carpeta

carga de la página web con jsoup:

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

eliminar los enlaces a hojas de estilo externas:

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

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

cadena de marca de jsoup-doc/página web:
```
String htmldata = doc.outerHtml(); 
```

pantalla página web en vista web:

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

Fuente

2012-05-01 12:52:05 Robert

Esta es la mejor solución que he visto. – confile

funcionó perfectamente. – randy

buena solución práctica, no te olvides de no usar eso en UI (principal) de la cadena. –

Si usted tiene su CSS en el almacenamiento de archivos interno que 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", "");

Fuente

2015-06-28 19:12:00 lejonl

Renderizar HTML en un WebView con CSS personalizado

Respuesta

Cuestiones relacionadas