关于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
<manifest ...= "" >
     <uses-permission android:name= "android.permission.INTERNET" >
     ...
</uses-permission></manifest>


二、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
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();
2、设置WebChromeClient子类
WebChromeClient会在一些影响浏览器ui交互动作发生时被调用,比如WebView关闭和隐藏、页面加载进展、js确认框和警告框、js加载前、js操作超时、webView获得焦点等等

?
1
mWebView.setWebChromeClient( new MyWebChromeClient());
3、设置WebViewClient子类
WebViewClient会在一些影响内容渲染的动作发生时被调用,比如表单的错误提交需要重新提交、页面开始加载及加载完成、资源加载中、接收到https认证需要处理、页面键盘响应、页面中的url打开处理等等

?
1
mWebView.setWebViewClient( new MyWebViewClient());
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
webView.setWebViewClient( new WebViewClient() { 
   
     @Override 
     public boolean shouldOverrideUrlLoading(WebView view, String url) { 
         view.loadUrl(url); 
         return true
    
});
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
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 );
    
});
五、处理https请求,为WebView处理ssl证书设置
WebView默认是不处理https请求的,页面显示空白,需要进行如下设置
在WebViewClient子类中重写父类的onReceivedSslError函数 代码如下:
?
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);  // 可做其他处理
     }
});

六、显示页面加载进度
在WebChromeClient子类中重写父类的onProgressChanged函数 代码如下:
?
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); 
        
    
});
onProgressChanged通知应用程序当前页面加载的进度
progress表示当前页面加载的进度,为1至100的整数

七、back键控制网页后退
Activity默认的back键处理为结束当前Activity,WebView查看了很多网页后,希望按back键返回上一次浏览的页面,这个时候我们就需要覆盖WebView所在Activity的onKeyDown函数,告诉他如何处理,代码如下:

?
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); 
}
其中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
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();
     }      
         
}
在HTML中Js调用Native方法 代码如下:

?
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>
2、Java调Js方法
比如在HTML中有如下Js函数

?
1
2
3
4
5
<script type= "text/javascript" >
       function showAlert() {
         alert( "Be executed by Native" );
     }
</script>
在Native调Js方法如下:

?
1
mWebView.loadUrl( "javascript:showAlert()" );

九、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
WebSettings webSettings = mWebView.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);  //设置 缓存模式 
// 开启 DOM storage API 功能 
webSettings.setDomStorageEnabled( true ); 
//开启 database storage API 功能 
webSettings.setDatabaseEnabled( true );

2、H5缓存
通过setAppCacheEnabled(boolean flag)设置H5的缓存是否打开,默认关闭。
根据setAppCachePath(String appCachePath)提供的路径,在H5使用缓存过程中生成的缓存文件。
通过setAppCacheMaxSize(long appCacheMaxSize)设置缓存最大容量。

如示例代码:

?
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);

十、加快HTML网页加载完成速度
默认情况html代码 下载 到WebView后,webkit开始解析网页各个节点,发现有外部样式文件或者外部脚本文件时,会异步发起网络请求下载文件,但如果在这之前也有解析到image节点,那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下,过多的网络请求就会造成带宽紧张,影响到css或js文件加载完成的时间,造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片,等页面finish后再发起图片加载。
故在WebView初始化时设置如下代码:

?
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 );
     }
}
同时在WebView的WebViewClient子类中重写onPageFinished()方法添加如下代码:

?
1
2
3
4
5
6
@Override
public void onPageFinished(WebView view, String url) {
     if (!webView.getSettings().getLoadsImagesAutomatically()) {
         webView.getSettings().setLoadsImagesAutomatically( true );
     }
}
从上面的代码,可以看出我们对系统API在19以上的版本作了兼容。因为4.4以上系统在onPageFinished时再恢复图片加载时,如果存在多张图片引用的是相同的src时,会只有一个image标签得到加载,因而对于这样的系统我们就先直接加载。


十一、WebView硬件加速导致页面渲染闪烁问题解决方法
关于Android硬件加速 开始于Android 3.0 (API level 11),在四个级别上开启/关闭硬件加速
1、Application级别:为整个应用程序开启硬件加速,在AndroidManifest中加入如下配置

?
1
</application>
2、Activity级别:控制每个activity是否开启硬件加速,只需在activity元素中添加android:hardwareAccelerated属性即可

?
1
</activity>
3、Window级别:注:目前还不支持在Window级别上关闭硬件加速

?
1
2
3
getWindow().setFlags(
     WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
     WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
4、View级别:运行时单个view硬件加速,目前Android还不支持在View级别开启硬件加速 代码如下:

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

十二、其他注意事项:
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相关问题注意:
 
 
AndroidwebView很强大,其实就是一个浏览器,你可以把它嵌入到你想要的位置,我这里遇到两个问题,就是怎么知道网页的加载进度和加载网页时,
 
点击网页里面的链接还是在当前的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();
 
}
 
 
});
s




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()方法:

[java]  view plain  copy
  在CODE上查看代码片
  1. /** 
  2.  * 显示自定义错误提示页面,用一个View覆盖在WebView 
  3.  */  
  4. protected void showErrorPage() {  
  5.     LinearLayout webParentView = (LinearLayout)mWebView.getParent();  
  6.       
  7.     initErrorPage();  
  8.     while (webParentView.getChildCount() > 1) {  
  9.         webParentView.removeViewAt(0);  
  10.     }  
  11.     LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT);  
  12.     webParentView.addView(mErrorView, 0, lp);  
  13.     mIsErrorPage = true;  
  14. }  
  15. protected void hideErrorPage() {  
  16.     LinearLayout webParentView = (LinearLayout)mWebView.getParent();  
  17.       
  18.     mIsErrorPage = false;  
  19.     while (webParentView.getChildCount() > 1) {  
  20.         webParentView.removeViewAt(0);  
  21.     }  
  22. }  
  23.   
  24.   
  25.    protected void initErrorPage() {  
  26.     if (mErrorView == null) {  
  27.         mErrorView = View.inflate(this, R.layout.online_error, null);  
  28.         Button button = (Button)mErrorView.findViewById(R.id.online_error_btn_retry);  
  29.         button.setOnClickListener(new OnClickListener() {  
  30.             public void onClick(View v) {  
  31.                 mWebView.reload();  
  32.             }  
  33.         });  
  34.         mErrorView.setOnClickListener(null);  
  35.     }  
  36. }  
[java]  view plain  copy
  在CODE上查看代码片
  1.   
[java]  view plain  copy
  在CODE上查看代码片
  1.   
[java]  view plain  copy
  在CODE上查看代码片
  1. @Override  
  2. public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {  
  3. <span style="white-space:pre">                  </span>  
  4. <span style="white-space:pre">          </span>mErrorView.setVisibility(View.VISIBLE);  
  5. <span style="white-space:pre">          </span>super.onReceivedError(view, errorCode, description, failingUrl);  
  6. }          


2.WebView cookies清理:

[java]  view plain  copy
  在CODE上查看代码片
  1. CookieSyncManager.createInstance(this);   
  2. CookieSyncManager.getInstance().startSync();   
  3. CookieManager.getInstance().removeSessionCookie();   

3.清理cache 和历史记录:

[java]  view plain  copy
  在CODE上查看代码片
  1. webView.clearCache(true);   
  2. webView.clearHistory();  

4.判断WebView是否已经滚动到页面底端:

[java]  view plain  copy
  在CODE上查看代码片
  1. getScrollY()方法返回的是当前可见区域的顶端距整个页面顶端的距离,也就是当前内容滚动的距离.   
  2. getHeight()或者getBottom()方法都返回当前WebView 这个容器的高度   
  3. getContentHeight 返回的是整个html 的高度,但并不等同于当前整个页面的高度,因为WebView 有缩放功能, 所以当前整个页面的高度实际上应该是原始html 的高度再乘上缩放比例. 因此,更正后的结果,准确的判断方法应该是:   
  4. 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:

[java]  view plain  copy
  在CODE上查看代码片
  1. @SuppressLint("NewApi")  
  2. @Override  
  3. public WebResourceResponse shouldInterceptRequest(WebView view,String url) {  
  4.     // 非超链接(如Ajax)请求无法直接添加请求头,现拼接到url末尾,这里拼接一个imei作为示例  
  5.   
  6.     String ajaxUrl = url;  
  7.     // 如标识:req=ajax  
  8.     if (url.contains("req=ajax")) {  
  9.        ajaxUrl += "&imei=" + imei;  
  10.     }  
  11.   
  12.     return super.shouldInterceptRequest(view, ajaxUrl);  
  13.   
  14. }  



7.在页面中先显示图片:

[java]  view plain  copy
  在CODE上查看代码片
  1. @Override  
  2. public void onLoadResource(WebView view, String url) {  
  3.   mEventListener.onWebViewEvent(CustomWebView.this, OnWebViewEventListener.EVENT_ON_LOAD_RESOURCE, url);  
  4.     if (url.indexOf(".jpg") > 0) {  
  5.      hideProgress(); //请求图片时即显示页面  
  6.      mEventListener.onWebViewEvent(CustomWebView.this, OnWebViewEventListener.EVENT_ON_HIDE_PROGRESS, view.getUrl());  
  7.      }  
  8.     super.onLoadResource(view, url);  
  9. }  


 8.屏蔽掉长按事件 因为webview长按时将会调用系统的复制控件:
      

[java]  view plain  copy
  在CODE上查看代码片
  1. mWebView.setOnLongClickListener(new OnLongClickListener() {  
  2.             
  3.           @Override  
  4.           public boolean onLongClick(View v) {  
  5.               return true;  
  6.           }  
  7.       });  


9.在WebView加入 flash支持:

[java]  view plain  copy
  在CODE上查看代码片
  1. String temp = "<html><body bgcolor=\"" + "black"  
  2.                 + "\"> <br/><embed src=\"" + url + "\" width=\"" + "100%"  
  3.                 + "\" height=\"" + "90%" + "\" scale=\"" + "noscale"  
  4.                 + "\" type=\"" + "application/x-shockwave-flash"  
  5.                 + "\"> </embed></body></html>";  
  6. String mimeType = "text/html";  
  7. String encoding = "utf-8";  
  8. web.loadDataWithBaseURL("null", temp, mimeType, encoding, "");  


10.WebView保留缩放功能但隐藏缩放控件:

[java]  view plain  copy
  在CODE上查看代码片
  1. mWebView.getSettings().setSupportZoom(true);  
  2.         mWebView.getSettings().setBuiltInZoomControls(true);  
  3.         if (DeviceUtils.hasHoneycomb())  
  4.               mWebView.getSettings().setDisplayZoomControls(false);  

注意:setDisplayZoomControls是在Android 3.0中新增的API.


这些是目前我整理出来的一些注意事项和问题解决方案,也欢迎大家多提一些关于webview的问题,如果有合适的解决方案,我会直接更新到这篇文章.


8月份更新:

11.WebView 在Android4.4的手机上onPageFinished()回调会多调用一次(具体原因待追查)

需要尽量避免在onPageFinished()中做业务操作,否则会导致重复调用,还有可能会引起逻辑上的错误.


12.需要通过获取Web页中的title用来设置自己界面中的title及相关问题:

需要给WebView设置 WebChromeClient,并在onReceiveTitle()回调中获取

[java]  view plain  copy
  在CODE上查看代码片
  1. WebChromeClient webChromeClient = new WebChromeClient() {    
  2.             @Override    
  3.             public void onReceivedTitle(WebView view, String title) {    
  4.                 super.onReceivedTitle(view, title);    
  5.                  
  6.                 txtTitle.setText(title);    
  7.             }    
  8.     
  9.         };    

但是发现在小米3的手机上,当通过webview.goBack()回退的时候,并没有触发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()中调用

[java]  view plain  copy
  在CODE上查看代码片
  1. webView.destroy();  

但是直接调用可能会引起如下错误:

[java]  view plain  copy
  在CODE上查看代码片
  1. 10-10 15:01:11.402: E/ViewRootImpl(7502): sendUserActionEvent() mView == null  
  2. 10-10 15:01:26.818: E/webview(7502): java.lang.Throwable: Error: WebView.destroy() called while still attached!  
  3. 10-10 15:01:26.818: E/webview(7502):    at android.webkit.WebViewClassic.destroy(WebViewClassic.java:4142)  
  4. 10-10 15:01:26.818: E/webview(7502):    at android.webkit.WebView.destroy(WebView.java:707)  
  5. 10-10 15:01:26.818: E/webview(7502):    at com.didi.taxi.ui.webview.OperatingWebViewActivity.onDestroy(OperatingWebViewActivity.java:236)  
  6. 10-10 15:01:26.818: E/webview(7502):    at android.app.Activity.performDestroy(Activity.java:5543)  
  7. 10-10 15:01:26.818: E/webview(7502):    at android.app.Instrumentation.callActivityOnDestroy(Instrumentation.java:1134)  
  8. 10-10 15:01:26.818: E/webview(7502):    at android.app.ActivityThread.performDestroyActivity(ActivityThread.java:3619)  
  9. 10-10 15:01:26.818: E/webview(7502):    at android.app.ActivityThread.handleDestroyActivity(ActivityThread.java:3654)  
  10. 10-10 15:01:26.818: E/webview(7502):    at android.app.ActivityThread.access$1300(ActivityThread.java:159)  
  11. 10-10 15:01:26.818: E/webview(7502):    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1369)  
  12. 10-10 15:01:26.818: E/webview(7502):    at android.os.Handler.dispatchMessage(Handler.java:99)  
  13. 10-10 15:01:26.818: E/webview(7502):    at android.os.Looper.loop(Looper.java:137)  
  14. 10-10 15:01:26.818: E/webview(7502):    at android.app.ActivityThread.main(ActivityThread.java:5419)  
  15. 10-10 15:01:26.818: E/webview(7502):    at java.lang.reflect.Method.invokeNative(Native Method)  
  16. 10-10 15:01:26.818: E/webview(7502):    at java.lang.reflect.Method.invoke(Method.java:525)  
  17. 10-10 15:01:26.818: E/webview(7502):    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1187)  
  18. 10-10 15:01:26.818: E/webview(7502):    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)  
  19. 10-10 15:01:26.818: E/webview(7502):    at dalvik.system.NativeStart.main(Native Method)  

如上所示,webview调用destory时,webview仍绑定在Activity上.这是由于自定义webview构建时传入了该Activity的context对象,因此需要先从父容器中移除webview,然后再销毁webview:

[java]  view plain  copy
  在CODE上查看代码片
  1. rootLayout.removeView(webView);  
  2. webView.destroy();  

15. WebView长按自定义菜单,实现复制分享相关功能

 这个功能首先可以从两方面完成:

  (1) 在js中完成:

    处理android.selection.longTouch

这里推荐一个开源项目进行参考,:

https://github.com/btate/BTAndroidWebViewSelection

   (2) 安卓层处理:

     首先使用OnTouchListener实现长按实现监听,然后实现WebView的Context menu,最后调用webview中的emulateShiftHeld(),为了适配安卓不同版本,最好使用反射方式调用.


来源: http://blog.csdn.net/t12x3456/article/details/13769731/

你可能感兴趣的:(android,html5,webView,H5,交互)