c# - studio - xamarin webview html binding

Cambiar estilos de página Android WebView

Question

Actualmente estoy trabajando en una pequeña aplicación que simplemente carga una página web en webview y quiero hacer que esta página web se vea diferente mientras navego usando esta aplicación.

Esta página usa un .css y quiero usar mi propia versión de .css en lugar de la original o simplemente reemplazar parte del original con el mío (usando el original y luego sobrescribiéndolo con mi versión).

¿Es posible modificar el código fuente de la página (opcionalmente incluso antes de que se cargue) para poder cambiar algunos estilos y hacer que la página web se vea diferente?

Solo para explicar: Quiero cambiar <link rel="stylesheet" type="text/css" href="original.css"> a <link rel="stylesheet" type="text/css" href="original.css"> <link rel="stylesheet" type="text/css" href="http://www.something.com/edited.css">

Estoy usando Xamarin Studio, C # Android WebView project, por cierto ... Además, esto se llamará duplicado de esto: anula el estilo de la página web en Android WebView pero nunca fue respondido, por lo que no es muy útil para mí ..

Answer 1

¿Has mirado a:

addJavascriptInterface (Object object, String name) de WebView?

Podría inyectar código para manipular el DOM. Probablemente sea una mala idea, ya que es un PROBLEMA DE SEGURIDAD de varias maneras.

Menos intrusivo y más seguro, el objeto WebSettings le permite cambiar algunos aspectos de la presentación: http://developer.android.com/reference/android/webkit/WebSettings.html

En esta área, otra herramienta para explorar es crear y establecer una subclase WebViewClient: http://developer.android.com/reference/android/webkit/WebViewClient.html

Solo algunas avenidas para explorar.

Answer 2

Puedes inyectar tu CSS usando Javascript. Puede insertar el siguiente javascript después de que WebView termine de cargarse:

var link = document.createElement("link");
link.href = "http://example.com/mystyle.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);  

Por lo tanto, su código final de Java tendrá el siguiente aspecto:

String jsToInject = "var link=document.createElement(''link'');link.href=''http://example.com/mystyle.css'';link.type =''text/css''; link.rel =''stylesheet'';document.getElementsByTagName(''head'')[0].appendChild(link);";
myWebView.loadUrl("javascript:" + jsToInject);