Rendering HTML in una WebView con CSS personalizzato

La mia app utilizza JSoup per scaricare l'HTML di una pagina della bacheca (diciamo che in questo caso si tratta di una pagina contenente i post di un determinato thread). Mi piacerebbe prendere questo codice HTML, rimuovere elementi indesiderati e applicare CSS personalizzati per renderlo "mobile" in una WebView.Rendering HTML in una WebView con CSS personalizzato

Devo inserire gli stili nell'HTML mentre lo elabora (poiché lo elaborerò comunque) o c'è un buon modo per aggiungere un file CSS alle risorse della mia app e semplicemente fare riferimento ad esso. Immagino che quest'ultimo sarebbe l'ideale, ma non sono sicuro di come procedere.

Vedo suggerimenti in loadDataWithBaseURL di WebView che è possibile fare riferimento alle risorse locali, ma non sono sicuro di come utilizzarlo.

fonte

2011-02-09 thedude19

103

Si potrebbe utilizzare 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);

E solo dopo che WebView sarà in grado di trovare e usare i CSS-files dalle attività directory.

ps E, sì, se si carica il file html nella cartella delle risorse, non è necessario specificare un URL di base.

fonte

2011-12-03 17:17:31

Grazie! Era proprio quello di cui avevo bisogno. (Per inciso, è possibile utilizzare le virgolette singole per gli attributi nell'HTML in linea anziché le doppie virgolette, in questo modo non è necessario eseguire il backslash. Sembra sempre un po 'più ordinato per me ...) –

Nice. Metterei il PS come risposta diretta: Se carichi il tuo file html con WebView.loadUrl ("file: ///android_asset/fname.html"); puoi semplicemente usare url relativi all'interno di esso. – fortboise

Come possiamo usare loadDataWithBaseURL() se il foglio di stile è in archivio? possiamo usare 'data/data/etc /'? – Yasir

È possibile avere tutti i contenuti visualizzati in-page, in un dato div? È quindi possibile ripristinare il css in base all'ID e procedere da lì.

Dire si dà il div id = "ocon"

nel CSS, avere una definizione del tipo:

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

ed è possibile impostare i valori per cancellare tutti i CSS da applicare al contenuto. Dopo di che, si può semplicemente utilizzare

#ocon ul{}

o qualsiasi altra cosa, più in basso il foglio di stile, di applicare nuovi stili al contenuto.

fonte

2011-02-09 22:35:29 daveyfaherty

Ecco la soluzione

Metti il tuo HTML e CSS nella cartella// Attività, quindi caricare il file HTML in questo modo:

WebView wv = new WebView(this); 

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

poi nel tuo html è possibile fare riferimento il CSS nel solito modo

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

fonte

2011-03-10 16:34:55 longhairedsi

E 'semplice come è:

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

E la tua some.html ha la necessità di contenere qualcosa come:

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

fonte

2011-11-30 15:18:12 egore911

presumo che il tuo stile "stile".css" si trova già nella attivi cartella

carico della pagina web con jsoup:

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

link Rimuovi per fogli di stile esterni:

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

set collegamento al foglio di stile 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");

stringa make da jsoup-doc/web-page:
```
String htmldata = doc.outerHtml(); 
```

visualizzazione pagina web in WebView:

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

fonte

2012-05-01 12:52:05 Robert

Questa è la soluzione migliore che ho visto. – confile

ha funzionato perfettamente – randy

bella soluzione pratica, non dimenticarti di non usarlo nella discussione dell'interfaccia utente (Main). –

Se hai il tuo CSS nella memoria file interno si possibile utilizzare

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

fonte

2015-06-28 19:12:00 lejonl

Rendering HTML in una WebView con CSS personalizzato

risposta

Problemi correlati