网上关于HTML5规范定稿的一篇见解文章:
http://www.csdn.net/article/2014-11-06/2822513-how-html5-changes
本篇主要基于这段时间对WebView的使用经验和网上学习到的对WebView开发做一个要点小结:
一、WebView基于webkit引擎展现web页面的控件,使用前需要在Android Manifest file中配置internet访问权限,否则提示页面无法访问。
1
2
3
4
|
<manifest ...=
""
>
<uses-permission android:name=
"android.permission.INTERNET"
>
...
</uses-permission></manifest>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(
true
);
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
webSettings.setDomStorageEnabled(
true
);
webSettings.setDatabaseEnabled(
true
);
webSettings.setAppCacheEnabled(
true
);
webSettings.setAllowFileAccess(
true
);
webSettings.setSavePassword(
true
);
webSettings.setSupportZoom(
true
);
webSettings.setBuiltInZoomControls(
true
);
/**
* 用WebView显示图片,可使用这个参数 设置网页布局类型:
* 1、LayoutAlgorithm.NARROW_COLUMNS :适应内容大小
* 2、LayoutAlgorithm.SINGLE_COLUMN : 适应屏幕,内容将自动缩放
*/
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
webSettings.setUseWideViewPort(
true
);
mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView.setHorizontalScrollbarOverlay(
true
);
mWebView.setHorizontalScrollBarEnabled(
true
);
mWebView.requestFocus();
|
1
|
mWebView.setWebChromeClient(
new
MyWebChromeClient());
|
1
|
mWebView.setWebViewClient(
new
MyWebViewClient());
|
三、设置当前网页的链接仍在WebView中跳转,而不是跳到手机浏览器里显示,
在WebViewClient的子类中重写shouldOverrideUrlLoading函数 代码如下:
1
2
3
4
5
6
7
8
|
webView.setWebViewClient(
new
WebViewClient() {
@Override
public
boolean
shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return
true
;
}
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
webView.setWebViewClient(
new
WebViewClient() {
@Override
public
void
onPageStarted(WebView view, String url, Bitmap favicon) {
super
.onPageStarted(view, url, favicon);
// 开始加载网页时处理 如:显示"加载提示" 的加载对话框
DialogManager.showLoadingDialog(
this
);
}
@Override
public
void
onPageFinished(WebView view, String url) {
super
.onPageFinished(view, url);
// 网页加载完成时处理 如:让 加载对话框 消失
DialogManager.dismissLoadingDialog();
}
@Override
public
void
onReceivedError(WebView view,
int
errorCode, String description, String failingUrl) {
super
.onReceivedError(view, errorCode, description, failingUrl);
// 加载网页失败时处理 如:
view.loadDataWithBaseURL(
null
,
"<span style="
\"color:#FF0000\"
">网页加载失败</span>"
,
"text/html"
,
"utf-8"
,
null
);
}
});
|
1
2
3
4
5
6
7
8
9
|
webView.setWebViewClient(
new
WebViewClient() {
@Override
public
void
onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
// 接受信任所有网站的证书
// handler.cancel(); // 默认操作 不处理
// handler.handleMessage(null); // 可做其他处理
}
});
|
1
2
3
4
5
6
7
8
9
10
11
|
webView.setWebChromeClient(
new
WebChromeClient() {
public
void
onProgressChanged(WebView view,
int
progress) {
setTitle(
"页面加载中,请稍候..."
+ progress +
"%"
);
setProgress(progress *
100
);
if
(progress ==
100
) {
setTitle(R.string.app_name);
}
}
});
|
1
2
3
4
5
6
7
|
public
boolean
onKeyDown(
int
keyCode, KeyEvent event) {
if
(webView.canGoBack() && event.getKeyCode() == KeyEvent.KEYCODE_BACK && event.getRepeatCount() ==
0
) {
webView.goBack();
return
true
;
}
return
super
.onKeyDown(keyCode, event);
}
|
八、使用addJavascriptInterface完成和js交互
1、Js中调Native本地Java方法
设置webView的addJavascriptInterface方法,该方法有两个参数,第一个参数为被绑定到js中的类实例,第二个参数为在js中暴露的类别名,在js中引用java对象就是用这个名字
在Native Java代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
mWebView.getSettings().setJavaScriptEnabled(
true
);
mWebView.addJavascriptInterface(
new
JavaScriptInterface(
this
),
"Android"
);
class
JavaScriptInterface{
Context mContext;
/** Instantiate the interface and set the context */
JavaScriptInterface(Context c) {
mContext = c;
}
/** Show a toast from the web page
* 由Js调用执行Native本地Java方法
*/
@JavascriptInterface
public
void
showToast(String toast) {
Log.d(
"TAG"
,
"Js Invoker Native Function"
);
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
}
|
1
2
3
4
5
6
7
|
<input type=
"button"
value=
"Say hello"
onclick=
"showAndroidToast('Hello Android!')"
>
<script type=
"text/javascript"
>
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
|
1
2
3
4
5
|
<script type=
"text/javascript"
>
function showAlert() {
alert(
"Be executed by Native"
);
}
</script>
|
1
|
mWebView.loadUrl(
"javascript:showAlert()"
);
|
1
2
3
4
5
6
|
WebSettings webSettings = mWebView.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
//设置 缓存模式
// 开启 DOM storage API 功能
webSettings.setDomStorageEnabled(
true
);
//开启 database storage API 功能
webSettings.setDatabaseEnabled(
true
);
|
1
2
3
4
5
6
7
8
9
10
|
String cacheDirPath = getCacheDir().getAbsolutePath()+
"/webViewCache "
;
WebSettings webSettings = mWebView.getSettings();
//开启 database storage API 功能
webSettings.setDatabaseEnabled(
true
);
//设置数据库缓存路径
webSettings.setDatabasePath(cacheDirPath);
//开启Application H5 Caches 功能
webSettings.setAppCacheEnabled(
true
);
//设置Application Caches 缓存目录
webSettings.setAppCachePath(cacheDirPath);
|
1
2
3
4
5
6
7
|
public
void
int
() {
if
(Build.VERSION.SDK_INT >=
19
) {
webView.getSettings().setLoadsImagesAutomatically(
true
);
}
else
{
webView.getSettings().setLoadsImagesAutomatically(
false
);
}
}
|
1
2
3
4
5
6
|
@Override
public
void
onPageFinished(WebView view, String url) {
if
(!webView.getSettings().getLoadsImagesAutomatically()) {
webView.getSettings().setLoadsImagesAutomatically(
true
);
}
}
|
十一、WebView硬件加速导致页面渲染闪烁问题解决方法
关于Android硬件加速 开始于Android 3.0 (API level 11),在四个级别上开启/关闭硬件加速
1、Application级别:为整个应用程序开启硬件加速,在AndroidManifest中加入如下配置
1
|
</application>
|
1
|
</activity>
|
1
2
3
|
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
|
1
|
mView.setLayerType(View.LAYER_TYPE_SOFTWARE,
null
);
|
[//TODO 关于Android硬件加速 小吕有时间会更详细的单独整理成一篇来做介绍
先提供学习地址:http://android.toolib.net/guide/topics/graphics/hardware-accel.html ]
我们开启硬件加速后,WebView渲染页面更加快速,拖动也更加顺滑。但有个副作用就是容易会出现页面加载白块同时界面闪烁现象。解决这个问题的方法是设置WebView暂时关闭硬件加速 代码如下:
1
2
3
|
if
(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
webview.setLayerType(View.LAYER_TYPE_SOFTWARE,
null
);
}
|
如何创建WebView:
1、添加权限:AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。
2、在要Activity中生成一个WebView组件:WebView webView = new WebView(this);
3、设置WebView基本信息:
如果访问的页面中有Javascript,则webview必须设置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);
触摸焦点起作用
webview.requestFocus();//如果不设置,则在点击网页文本输入框时,不能弹出软键盘及不响应其他的一些事件。
取消滚动条
this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);
4、设置WevView要显示的网页:
互联网用:webView.loadUrl("http://www.google.com");
本地文件用:webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在:assets文件中
5、如果希望点击链接由自己处理,而不是新开Android的系统browser中响应该链接。
给WebView添加一个事件监听对象(WebViewClient)
并重写其中的一些方法
shouldOverrideUrlLoading:对网页中超链接按钮的响应。
当按下某个连接时WebViewClient会调用这个方法,并传递参数:按下的url
onLoadResource
onPageStart
onPageFinish
onReceiveError
onReceivedHttpAuthRequest
6.listview,webview中滚动拖动到顶部或者底部时的阴影(滑动到项部或底部不固定)
WebView.setOverScrollMode(View.OVER_SCROLL_NEVER);
7.//android 中 webview 使用 localStorage
WebSettings settings = mWebView.getSettings();
// 设置可以使用localStorage
settings.setDomStorageEnabled(true);
// 应用可以有数据库
settings.setDatabaseEnabled(true);
String dbPath = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
settings.setDatabasePath(dbPath);
// 应用可以有缓存
settings.setAppCacheEnabled(true);
String appCaceDir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
settings.setAppCachePath(appCaceDir);
8、如果用webview点链接看了很多页以后,如果不做任何处理,点击系统“Back”键,整个浏览器会调用finish()而结束自身,如果希望浏览的网页回退而不是退出浏览器,需要在当前Activity中处理并消费掉该Back事件。
覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法。
public boolean onKeyDown(int keyCoder,KeyEvent event){
if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){
webview.goBack(); //goBack()表示返回webView的上一页面
return true;
}
return false;
}
WebView相关问题注意:
Android的webView很强大,其实就是一个浏览器,你可以把它嵌入到你想要的位置,我这里遇到两个问题,就是怎么知道网页的加载进度和加载网页时,
点击网页里面的链接还是在当前的webview里跳转,不想跳到浏览器那边,解决办法如下:
//此方法可以处理webview 在加载时和加载完成时一些操作
webView.setWebChromeClient(new WebChromeClient(){
@Override
public void onProgressChanged(WebView view, int newProgress) {
if(newProgress==100){ // 这里是设置activity的标题, 也可以根据自己的需求做一些其他的操作
title.setText("加载完成");
}else{
title.setText("加载中.......");
}
}
});
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) { //重写此方法表明点击网页里面的链接还是在当前的webview里跳转,不跳到浏览器那边
view.loadUrl(url);
return true;
}
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, android.net.http.SslError error) { // 重写此方法可以让webview处理https请求
handler.proceed();
}
});
Android WebView常见问题解决方案汇总:
就目前而言,如何应对版本的频繁更新呢,又如何灵活多变地展示我们的界面呢,这又涉及到了web app与native app之间孰优孰劣的争论. 于是乎,一种混合型的app诞生了,灵活多变的部分,如淘宝商城首页的活动页面,一集凡客诚品中我们都可以见到web 页面与native页面的混合,既利用了web app的灵活易更新,也借助了native app本身的效率.
当然,就会用到webview这样的一个控件,这里,我把自己使用过程中遇到的一些问题整理下来.
首先上张图对WebView进行一个基本的回顾:
以上思维导图原文件下载地址:
http://download.csdn.net/detail/t12x3456/6509195
然后看一下具体的问题及解决方案:
1.为WebView自定义错误显示界面:
覆写WebViewClient中的onReceivedError()方法:
5.URL拦截:
Android WebView是拦截不到页面内的fragment跳转的。但是url跳转的话,又会引起页面刷新,H5页面的体验又下降了。只能给WebView注入JS方法了。
有时候需要加上请求头,但是非超链接的请求,没有办法再shouldOverrinding中拦截并用webView.loadUrl(String url,HashMap headers)方法添加请求头
目前用了一个临时的办法解决:
首先需要在url中加特殊标记/协议, 如在onWebViewResource方法中拦截对应的请求,然后将要添加的请求头,以get形式拼接到url末尾
在shouldInterceptRequest()方法中,可以拦截到所有的网页中资源请求,比如加载JS,图片以及Ajax请求等等
Ex:
7.在页面中先显示图片:
8.屏蔽掉长按事件 因为webview长按时将会调用系统的复制控件:
9.在WebView加入 flash支持:
10.WebView保留缩放功能但隐藏缩放控件:
这些是目前我整理出来的一些注意事项和问题解决方案,也欢迎大家多提一些关于webview的问题,如果有合适的解决方案,我会直接更新到这篇文章.
8月份更新:
11.WebView 在Android4.4的手机上onPageFinished()回调会多调用一次(具体原因待追查)
需要尽量避免在onPageFinished()中做业务操作,否则会导致重复调用,还有可能会引起逻辑上的错误.
12.需要通过获取Web页中的title用来设置自己界面中的title及相关问题:
需要给WebView设置 WebChromeClient,并在onReceiveTitle()回调中获取
这里可以分两种情况去处理:
(1) 可以确定webview中子页面只有二级页面,没有更深的层次,这里只需要判断当前页面是否为初始的主页面,可以goBack的话,只要将标题设置回来即可.
(2)webview中可能有多级页面或者以后可能增加多级页面,这种情况处理起来要复杂一些:
因为正常顺序加载的情况onReceiveTitle是一定会触发的,所以就需要自己来维护webview loading的一个url栈及url与title的映射关系
那么就需要一个ArrayList来保持加载过的url,一个HashMap保存url及对应的title.
正常顺序加载时,将url和对应的title保存起来,webview回退时,移除当前url并取出将要回退到的web 页的url,找到对应的title进行设置即可.
这里还要说一点,当加载出错的时候,比如无网络,这时onReceiveTitle中获取的标题为 找不到该网页,因此建议当触发onReceiveError时,不要使用获取到的title.
13.WebView因addJavaScriptInterface()引起的安全问题.
这个问题主要是因为会有恶意的js代码注入,尤其是在已经获取root权限的手机上,一些恶意程序可能会利用该漏洞安装或者卸载应用.
关于详细的情况可以参考下面这篇文章:
.http://blog.csdn.net/leehong2005/article/details/11808557
还有一个开源项目可以参考: https://github.com/pedant/safe-java-js-webview-bridge, 该项目利用onJsPrompt() 替代了addJavaScriptInterface(),(解决方案类似上述参考的博客)同时增加了异步回调,
很好地解决了webview js注入的安全问题.
10月份更新:
14.WebView页面中播放了音频,退出Activity后音频仍然在播放
需要在Activity的onDestory()中调用
15. WebView长按自定义菜单,实现复制分享相关功能
这个功能首先可以从两方面完成:
(1) 在js中完成:
处理android.selection.longTouch
这里推荐一个开源项目进行参考,:
https://github.com/btate/BTAndroidWebViewSelection
(2) 安卓层处理:
首先使用OnTouchListener实现长按实现监听,然后实现WebView的Context menu,最后调用webview中的emulateShiftHeld(),为了适配安卓不同版本,最好使用反射方式调用.