关于webview与H5属性设置以及交互的总结
网上关于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 |
|
二、WebView属性的设置
1、设置WebSettings类
WebSettings用来对WebView的配置进行配置和管理，比如是否可以进行文件操作、缓存的设置、页面是否支持放大和缩小、是否允许使用数据库api、字体及文字编码设置、是否允许js脚本运行、是否允许图片自动加载、是否允许数据及密码保存等等
示例代码如下：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
2、设置WebChromeClient子类
WebChromeClient会在一些影响浏览器ui交互动作发生时被调用，比如WebView关闭和隐藏、页面加载进展、js确认框和警告框、js加载前、js操作超时、webView获得焦点等等
| 1 |
|
3、设置WebViewClient子类
WebViewClient会在一些影响内容渲染的动作发生时被调用，比如表单的错误提交需要重新提交、页面开始加载及加载完成、资源加载中、接收到https认证需要处理、页面键盘响应、页面中的url打开处理等等
| 1 |
|
4、设置addJavascriptInterface方法
使Js调用Native本地Java对象,实现本地Java代码和HTML页面进行交互，
注意:因为安全问题的考虑 Google在使用Android API 17以上的版本的时候 需要通过@JavascriptInterface来注解的Java函数才能被识别可以被Js调用。
三、设置当前网页的链接仍在WebView中跳转，而不是跳到手机浏览器里显示，
在WebViewClient的子类中重写shouldOverrideUrlLoading函数 代码如下：
| 1 2 3 4 5 6 7 8 |
|
shouldOverrideUrlLoading表示当前webView中的一个新url需要加载时，给当前应用程序一个处理机会，如果没有重写此函数，webView请求ActivityManage选择合适的方式处理请求，就像弹出uc和互联网让用户选择浏览器一样。重写后return true表示让当前程序处理，return false表示让当前webView处理
四、设置开始加载网页、加载完成、加载错误时处理
在WebViewClient子类中分别重写如下父类函数 代码如下：
| 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 |
|
五、处理https请求，为WebView处理ssl证书设置
WebView默认是不处理https请求的，页面显示空白，需要进行如下设置
在WebViewClient子类中重写父类的onReceivedSslError函数 代码如下：
| 1 2 3 4 5 6 7 8 9 |
|
六、显示页面加载进度
在WebChromeClient子类中重写父类的onProgressChanged函数 代码如下：
| 1 2 3 4 5 6 7 8 9 10 11 |
|
onProgressChanged通知应用程序当前页面加载的进度
progress表示当前页面加载的进度，为1至100的整数
七、back键控制网页后退
Activity默认的back键处理为结束当前Activity，WebView查看了很多网页后，希望按back键返回上一次浏览的页面，这个时候我们就需要覆盖WebView所在Activity的onKeyDown函数，告诉他如何处理，代码如下：
| 1 2 3 4 5 6 7 |
|
其中webView.canGoBack()在webView含有一个可后退的浏览记录时返回true
webView.goBack();表示返回至webView的上次访问页面
八、使用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 |
|
在HTML中Js调用Native方法 代码如下：
| 1 2 3 4 5 6 7 |
|
2、Java调Js方法
比如在HTML中有如下Js函数
| 1 2 3 4 5 |
|
在Native调Js方法如下：
| 1 |
|
九、WebView缓存模式的设置
1、网页数据缓存
当使用WebView加载HTML网页时，会在我们data/应用package下生成database与cache两个文件夹:
我们请求的Url记录是保存在webviewCache.db里，而url的内容是保存在webviewCache文件夹下.
五种缓存模式的设置setCacheMode：
LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据。
LOAD_DEFAULT: 根据cache-control决定是否从网络上取数据。
LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式。
LOAD_NO_CACHE: 不使用缓存，只从网络获取数据。
LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
如示例代码：
| 1 2 3 4 5 6 |
|
2、H5缓存
通过setAppCacheEnabled(boolean flag)设置H5的缓存是否打开，默认关闭。
根据setAppCachePath(String appCachePath)提供的路径，在H5使用缓存过程中生成的缓存文件。
通过setAppCacheMaxSize(long appCacheMaxSize)设置缓存最大容量。
如示例代码：
| 1 2 3 4 5 6 7 8 9 10 |
|
十、加快HTML网页加载完成速度
默认情况html代码下载到WebView后，webkit开始解析网页各个节点，发现有外部样式文件或者外部脚本文件时，会异步发起网络请求下载文件，但如果在这之前也有解析到image节点，那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下，过多的网络请求就会造成带宽紧张，影响到css或js文件加载完成的时间，造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片，等页面finish后再发起图片加载。
故在WebView初始化时设置如下代码：
| 1 2 3 4 5 6 7 |
|
同时在WebView的WebViewClient子类中重写onPageFinished()方法添加如下代码：
| 1 2 3 4 5 6 |
|
从上面的代码，可以看出我们对系统API在19以上的版本作了兼容。因为4.4以上系统在onPageFinished时再恢复图片加载时,如果存在多张图片引用的是相同的src时，会只有一个image标签得到加载，因而对于这样的系统我们就先直接加载。
十一、WebView硬件加速导致页面渲染闪烁问题解决方法
关于Android硬件加速 开始于Android 3.0 (API level 11),在四个级别上开启/关闭硬件加速
1、Application级别：为整个应用程序开启硬件加速，在AndroidManifest中加入如下配置
| 1 |
|
2、Activity级别：控制每个activity是否开启硬件加速，只需在activity元素中添加android:hardwareAccelerated属性即可
| 1 |
|
3、Window级别：注：目前还不支持在Window级别上关闭硬件加速
| 1 2 3 |
|
4、View级别：运行时单个view硬件加速，目前Android还不支持在View级别开启硬件加速 代码如下：
| 1 |
|
[//TODO 关于Android硬件加速 小吕有时间会更详细的单独整理成一篇来做介绍
先提供学习地址：http://android.toolib.net/guide/topics/graphics/hardware-accel.html ]
我们开启硬件加速后，WebView渲染页面更加快速，拖动也更加顺滑。但有个副作用就是容易会出现页面加载白块同时界面闪烁现象。解决这个问题的方法是设置WebView暂时关闭硬件加速 代码如下：
| 1 2 3 |
|
十二、其他注意事项：
1> 从网络上下载html页面的过程应放在工作线程(后台线程)中
2> html下载成功后渲染出html的步骤应放在UI主线程,不然WebView加载网页过程会容易报错
来源： http://www.2cto.com/kf/201411/354679.html
如何创建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();
}
}
);
sAndroid 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()方法:
/**
* 显示自定义错误提示页面，用一个View覆盖在WebView
*/
protected void showErrorPage() {
LinearLayout webParentView = (LinearLayout)mWebView.getParent();
initErrorPage();
while (webParentView.getChildCount() > 1) {
webParentView.removeViewAt(0);
}
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT);
webParentView.addView(mErrorView, 0, lp);
mIsErrorPage = true;
}
protected void hideErrorPage() {
LinearLayout webParentView = (LinearLayout)mWebView.getParent();
mIsErrorPage = false;
while (webParentView.getChildCount() > 1) {
webParentView.removeViewAt(0);
}
}
protected void initErrorPage() {
if (mErrorView == null) {
mErrorView = View.inflate(this, R.layout.online_error, null);
Button button = (Button)mErrorView.findViewById(R.id.online_error_btn_retry);
button.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
mWebView.reload();
}
});
mErrorView.setOnClickListener(null);
}
}
2.WebView cookies清理：
- CookieSyncManager.createInstance(this);
- CookieSyncManager.getInstance().startSync();
- CookieManager.getInstance().removeSessionCookie();
3.清理cache 和历史记录:
- webView.clearCache(true);
- webView.clearHistory();
4.判断WebView是否已经滚动到页面底端:
- getScrollY()方法返回的是当前可见区域的顶端距整个页面顶端的距离,也就是当前内容滚动的距离.
- getHeight()或者getBottom()方法都返回当前WebView 这个容器的高度
- getContentHeight 返回的是整个html 的高度,但并不等同于当前整个页面的高度,因为WebView 有缩放功能, 所以当前整个页面的高度实际上应该是原始html 的高度再乘上缩放比例. 因此,更正后的结果,准确的判断方法应该是：
- if(WebView.getContentHeight*WebView.getScale() == (webview.getHeight()+WebView.getScrollY())){ //已经处于底端 }
5.URL拦截:
Android WebView是拦截不到页面内的fragment跳转的。但是url跳转的话，又会引起页面刷新，H5页面的体验又下降了。只能给WebView注入JS方法了。
6.处理WebView中的非超链接请求(如Ajax请求):
有时候需要加上请求头，但是非超链接的请求，没有办法再shouldOverrinding中拦截并用webView.loadUrl(String url,HashMap headers)方法添加请求头
目前用了一个临时的办法解决：
首先需要在url中加特殊标记/协议, 如在onWebViewResource方法中拦截对应的请求，然后将要添加的请求头，以get形式拼接到url末尾
在shouldInterceptRequest()方法中,可以拦截到所有的网页中资源请求，比如加载JS，图片以及Ajax请求等等
Ex:
@SuppressLint("NewApi")
@Override
public WebResourceResponse shouldInterceptRequest(WebView view,String url) {
// 非超链接(如Ajax)请求无法直接添加请求头，现拼接到url末尾,这里拼接一个imei作为示例
String ajaxUrl = url;
// 如标识:req=ajax
if (url.contains("req=ajax")) {
ajaxUrl += "&imei=" + imei;
}
return super.shouldInterceptRequest(view, ajaxUrl);
} 7.在页面中先显示图片:
@Override
public void onLoadResource(WebView view, String url) {
mEventListener.onWebViewEvent(CustomWebView.this, OnWebViewEventListener.EVENT_ON_LOAD_RESOURCE, url);
if (url.indexOf(".jpg") > 0) {
hideProgress(); //请求图片时即显示页面
mEventListener.onWebViewEvent(CustomWebView.this, OnWebViewEventListener.EVENT_ON_HIDE_PROGRESS, view.getUrl());
}
super.onLoadResource(view, url);
}
8.屏蔽掉长按事件 因为webview长按时将会调用系统的复制控件:
mWebView.setOnLongClickListener(new OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
return true;
}
});
9.在WebView加入 flash支持:
String temp = "