Android WebView的一些使用技巧

Android WebView的一些使用技巧

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