从java代码中操作DOM
* 最简单的办法是使用WebView.loadUrl("javascript: javascript_code_to_modify_dom();"),用这个方法可以方便的对DOM进行修改,可以使用JQuery。这个方法的缺点是没法读取DOM,而只能修改,或调用js方法。
* 利用html中的Form表单(必须使用GET方法)和WebClient.shouldOverrideUrlLoading()来获取js中的值。这是个小技巧,用上一方法可以强制html页面进行提交,然后在shouldOverrideUrlLoading()中拦截GET请求并解析参数就可以访问html页面DOM中的值了。
* 理论上来说,上面两个小技巧结合使用,就可以对DOM进行任何操作了,因为Form也可以用js来动态插入DOM.
拦截POST请求,处理文件上传
* 使用WebClient.shouldOverrideUrlLoading()是无法拦截POST请求的。
* 可以用前一条中的小技巧,把POST方法改成GET方法,就可以拦截了,然后在java代码中用HttpClient发起POST请求。
* 对于超长文本不用担心超出GET参数的长度限制,限制GET请求的参数长度是浏览器行为,在HTTP协议中并无限制。
* 对于本地文件上传,可以在表单参数中包含文件的绝对路径,在java代码中拦截到GET请求后,使用HttpClient发起multipart-formdata编码的POST上传请求。
关于屏幕密度Density和放缩
* WebView默认是要按照中等密度的屏幕的视觉效果进行放缩的,这样网页在高分屏下不会显得过小,在低分屏下也不会过大
* 这个缩放比例可以在DOM中通过window.devicePixelRatio来访问,对于中分屏(480x320)是1.0,对于高分屏(>=800x480)中这个值是1.5,对于低分屏(320x240)则是0.75
* 可以在html页面中用meta来显式指定密度,语法如下:
1
2
3
4
5
6
7
8
|
<
meta
name
=
"viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] " />
|
详细介绍在:http://www.cnblogs.com/cosiray/archive/2012/06/25/2562117.html
关于html元素的尺寸
* 在html中预设body的宽和高为相对值(如style="width=100%;height=100%")没有效果,结果总是0。同理,body的子元素预设为相对尺寸也无效
* 用绝对像素数是可以的,但是这样无法做到自动适配屏幕尺寸
* 不指定尺寸的默认行为是根据元素内的内容来决定容器的尺寸
按照屏幕大小预设body的尺寸
* 在WebClient.onPageFinished()中获取WebView的像素尺寸(在onCreate中无法获取到View的实际尺寸的,因为它还未渲染)。
* 用WebView.loadUrl()把屏幕尺寸传入html中,然后在js中结合放缩比例来设置body等元素的绝对像素尺寸,例程如下:
java中:
1
2
3
|
@Override
public
void
onPageFinished(WebView view, String url) {
view.loadUrl(
"javascript:setSize("
+ view.getWidth() +
","
+ view.getHeight() +
");"
);
}
|
html中的javascript:
1
2
3
4
|
function
setSize(w, h) {
$(
"body"
).width(w / window.devicePixelRatio);
$(
"body"
).height(h / window.devicePixelRatio);
}
|