Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Prestación de HTML en un WebView con CSS personalizado

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

¿Debo 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 referirme a él. Me imagino que este último sería ideal, pero no está seguro de cómo hacerlo.

  • Android autofit mode causando problemas con el ancho css en la página web
  • Ocultar imágenes que no se han cargado
  • ¿Los navegadores iPhone / Android admiten CSS @media handheld?
  • Animar objeto utilizando datos de acelerómetro de Android
  • Escala de una aplicación Phonegap para diferentes tamaños de pantalla de Android / densidades?
  • Android Dropdown (Seleccionar) CSS
  • Veo sugerencias en LoadDataWithBaseURL de WebView que puede hacer referencia a activos locales, pero no estoy seguro de cómo utilizarlo.

  • Android Web App: Posición: fijo roto?
  • Android: html en strings.xml
  • Android autofit mode causando problemas con el ancho css en la página web
  • HTML: ¿Por qué el navegador de Android muestra "Ir" en lugar de "Siguiente" en el teclado?
  • Habilitar posicionamiento fijo real en los navegadores de Android de Samsung
  • Multi Seleccionar cuadro <select> en dispositivos móviles
  • 6 Solutions collect form web for “Prestación de HTML en un WebView con CSS personalizado”

    Puede 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 WebView será capaz de encontrar y utilizar css-archivos desde el directorio de activos.

    Ps Y, sí, si carga su formulario html-file en la carpeta assets, no necesita especificar una url de base.

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

    1. Cargue la página web con jsoup:

       doc = Jsoup.connect("http://....").get(); 
    2. Eliminar vínculos a hojas de estilo externas:

       // remove links to external style-sheets doc.head().getElementsByTag("link").remove(); 
    3. Establecer enlace a la hoja de estilos 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 cadena desde jsoup-doc / web-page:

       String htmldata = doc.outerHtml(); 
    5. Mostrar la página web en webview:

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

    Aquí está la solución

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

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

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

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

    ¿Es posible tener todo el contenido renderizado en la página, en una div determinada? A continuación, puede restablecer el css basado en el ID, y trabajar desde allí.

    Digamos que le das a tu 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 la aplicación al contenido. Después de eso, sólo puede utilizar

     #ocon ul{} 

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

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

     //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", ""); 
    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.