Android WebView: realizar cambios en la apariencia de la interfaz de usuario | Autor: Vahé Khachaturian | Noviembre de 2021
Recientemente, estoy lidiando con una tarea muy específica, que es eliminar un título de componente de la interfaz de usuario del contenido web en WebView. Después de investigar un poco y perder algunas horas, encontré una solución que me funcionó y decidí compartirla.
Aviso: Antes de comenzar, es necesario mencionar que este método tiene un problema grave, es decir, el elemento de la interfaz de usuario que estamos eliminando parpadea antes de que realmente se elimine. Hasta donde yo sé, este comportamiento no se puede evitar porque para eliminar un elemento de la interfaz de usuario web, tenemos que esperar hasta que cargue por completo sus elementos.
Dado que WebView puede ejecutar código JavaScript, podemos inyectar nuestro propio código en él cuando sea necesario y usar su Evaluar Javascript () Método como este
webView.evaluateJavascript("**JavaScript code**", null)
O para versiones anteriores inferiores a API 19 (4.4 KitKat)
webView.loadUrl("javascript: **JavaScript code**")
Entonces, después de crear problemas En la consola de Chrome (si no lo sabe, puede presionar f12 En cualquier sitio web, y mirando el código HTML real de la página (no solo), descubrí que puedo cambiar la visibilidad de cualquier elemento al visitarlo. «estilo» Alcance. Entonces, lo que necesito es obtener una instancia de un elemento de la interfaz de usuario, obtener su parámetro de «estilo» y establecerlo en «ninguno».
Existen varias funciones que nos permiten obtener instancias de elementos de UI. Para esta situación particular, usaremos dos de ellos.
//returns an array of elements matching the given html tag name such //as '<header/>' or '<div/>' or '<body/>' etc
document.getElementsByTagName('tagName')//returns an array of elements matching the given class name
document.getElementsByClassName('className')
Para obtener el nombre de la clase, simplemente busque el parámetro «clase» de la etiqueta que le interesa.
Pude eliminar el título usando getElementsByTagName () método. Este es un ejemplo de implementación real.
webView.webViewClient = object : WebViewClient()
override fun onLoadResource(view: WebView?, url: String?)
super.onLoadResource(view, url)
view?.evaluateJavascript(
"document.getElementsByTagName('header')[0].style.display = 'none'",
null
)
Pero el problema es que en mi caso, el código HTML fue diseñado para dejar un espacio en blanco después de eliminar el título en lugar de él.Resulta que también debo partir de un <部分/> Debajo del encabezado y cambiar el tamaño de otro <部分/> Debajo de eso, usa el nombre de la clase esta vez.
view?.evaluateJavascript(
"document.getElementsByClassName('**section className**')[0].style.top = '0px'",
null
)
view?.evaluateJavascript(
"document.getElementsByClassName('**another section className**')[0].style.height = '25px'",
null
)
Eso es todo.Si desea realizar algún cambio en la interfaz de usuario web, puede hacerlo accediendo a los elementos utilizando las siguientes funciones
document.getElementsByName('tagName')document.getElementById('elementId')document.getElementsByClassName('className')document.getElementsByName('elementName')
Lo único que debes recordar es que debes ser onLoadResource () Función desde la que puede anular WebViewClient ().
Espero que este artículo le ayude y le evite una búsqueda dolorosa y una pérdida de tiempo. ¡Feliz codificación! ! 🙂
