android JS动态框架,Android WebView 动态注入 CSS 和 JavaScript

如何在 Android WebView 重动态加载页面和注入 CSS 和 JavaScript ?

我们在开发过程中可能有这样的需求, 用一个 WebView 去加载网页的时候, 原来的网页里面的样式用安卓的WebView控件打开, 想改变原网页的样式为另外的一种样式, 这时候就可以采用这样的方法:

主要使用了 Android WebView 这个类里面的一个函数:

loadDataWithBaseURL(url, page, null, mDefaultEncoding, null);

下面是完整的 CSS注入 代码:

public class StyledWebView extends WebView {

private static final String TAG = "AsSamsung";

public static String mDefaultEncoding = "UTF-8";

private Context mContext;

private String mCss, mUrl;

public StyledWebView(Context context, AttributeSet attrs) {

super(context, attrs);

mContext = context;

this.setHorizontalScrollBarEnabled(true);

this.getSettings().setJavaScriptEnabled(true);

this.getSettings().setBuiltInZoomControls(true);

// Read custom attributes

TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.StyledWebView);

mCss = a.getString(R.styleable.StyledWebView_css);

mUrl = a.getString(R.styleable.StyledWebView_url);

a.recycle();

loadUrl(mUrl);

}

/**

* Complete delete everything in the webview.

* Is needed to repaint

*/

public void clean() {

super.loadUrl("javascript:document.getElementsByTagName('body')[0].innerHTML='';");

}

/**

* Download url content, store it as a file and concat styles

*/

@Override

public void loadUrl(String url) {

String page = WGet(url);

String css = buildCss();

page = injectCss(page, css);

super.loadDataWithBaseURL(url, page, null, mDefaultEncoding, null);

}

/**

* Concatenates CSS rules to given page content

* @return Concatenation result

*/

private String injectCss(String page, String css) {

int headEnd = page.indexOf("");

String res = "";

if (headEnd > 0) {

res = page.substring(0, headEnd) + css + page.substring(headEnd, page.length());

} else {

res = "

" + css + "" + page;

}

return res;

}

/**

* Fetches url content and returns it as string

*/

private String WGet(String webUrl) {

StringBuilder total = new StringBuilder();

try {

URL url = new URL(webUrl);

HttpURLConnection connection = (HttpURLConnection) url.openConnection();

InputStream is = connection.getInputStream();

String encoding = connection.getContentEncoding();

if (encoding == null) {

encoding = mDefaultEncoding;

}

BufferedReader r = new BufferedReader(new InputStreamReader(is, encoding));

String line;

while ((line = r.readLine()) != null) {

total.append(line);

}

} catch (IOException e) {

e.printStackTrace();

}

return total.toString();

}

/**

* Read CSS file from assets

* @return String with the format ''

*/

private String buildCss() {

StringBuilder contents = new StringBuilder();

InputStreamReader reader;

try {

reader = new InputStreamReader(mContext.getAssets().open(mCss), mDefaultEncoding);

BufferedReader br = new BufferedReader(reader);

String line;

while ((line = br.readLine()) != null) {

contents.append(line);

}

} catch (UnsupportedEncodingException e) {

e.printStackTrace();

} catch (IOException e) {

e.printStackTrace();

}

return "";

}

public void setDefaultEncoding(String encoding) {

mDefaultEncoding = encoding;

}

}

assets目录下的两个文件:

文件1: customStyle.css

a {

color: #A4C639 !important;

font-weight: bold;

}

文件2: resultados.css

h1, h2 {

color: red;

}

ul.tabmain a{

color: green;

}

同理 JavaScript 也是类似的思路. 有兴趣小伙伴可以去试一下.