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.

  • El posicionamiento fijo en el navegador Android 2.3 debería funcionar ... ¿no?
  • @ Font-face no funciona en Webkit para móviles
  • Problema de alineación vertical de texto en android y ios
  • Android4 sólo el navegador de valores comportamiento extraño con texto de entrada
  • El navegador de Android ignora el diseño web sensible
  • 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.

  • Combine layout_weight y maxWidth para las vistas
  • Imágenes borrosas de SVG en cromo para Android
  • Soporte de iframe en móviles
  • WebView de Android manipula incorrectamente nuevas líneas en texto preformateado
  • Consejos para optimizar un sitio web para el navegador de Android?
  • Fondo-adjunto: fijo no funciona en android / móvil
  • 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.