更改页面样式Android WebView

Question

I'm currently working on a small application that simply loads one webpage into webview and I want to be able to make this webpage look different while browsing using this application..

This page uses one .css and I want to use my own version of that .css instead of the original one or just replace part of the original with mine (by using the original and then overwriting it with my version)..

Is it possible to modify source code of the page (optionaly before it even loads) so I can change some styles to make the webpage look different?

Just to explain: I want change <link rel="stylesheet" type="text/css" href="original.css"> to <link rel="stylesheet" type="text/css" href="original.css"> <link rel="stylesheet" type="text/css" href="http://www.something.com/edited.css">

I'm using Xamarin Studio, C# Android WebView project, by the way.. Also, this is very likely going to be called duplicate of this: Override web page style in Android WebView but it was never answered so it's not very helpful for me..

Answer 1

Have you looked at:

addJavascriptInterface (Object object, String name) of the WebView?

You could inject code to manipulate the DOM. This probably a bad idea as it is a SECURITY ISSUE in a number of ways.

Less intrusive and more secure, the WebSettings object allows you to change some presentation aspects: http://developer.android.com/reference/android/webkit/WebSettings.html

In this area another tool to explore is to create and set a WebViewClient subclass: http://developer.android.com/reference/android/webkit/WebViewClient.html

Just a few avenues to explore.

Answer 2

You can inject your css using Javascript. You can inject following javascript after the WebView is finished loading:

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

So your final Java code will look something like this:

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