关于webview与H5属性设置以及交互的总结

ゝ一世哀愁。 2022-07-16 06:38 1118阅读 0赞

网上关于HTML5规范定稿的一篇见解文章：

http://www.csdn.net/article/2014-11-06/2822513-how-html5-changes

本篇主要基于这段时间对WebView的使用经验和网上学习到的对WebView开发做一个要点小结：

一、WebView基于webkit引擎展现web页面的控件，使用前需要在Android Manifest file中配置internet访问权限，否则提示页面无法访问。

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">&lt;manifest ...=</code><code style="margin-left:0px;">""</code><code style="margin-left:0px;">&gt;</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">&lt;uses-permission android:name=</code><code style="margin-left:0px;">"android.permission.INTERNET"</code><code style="margin-left:0px;">&gt;</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">...</code> <code style="margin-left:0px;">&lt;/uses-permission&gt;&lt;/manifest&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

二、WebView属性的设置  
1、设置WebSettings类  
WebSettings用来对WebView的配置进行配置和管理，比如是否可以进行文件操作、缓存的设置、页面是否支持放大和缩小、是否允许使用数据库api、字体及文字编码设置、是否允许js脚本运行、是否允许图片自动加载、是否允许数据及密码保存等等  
示例代码如下：

[?][Link 1]

<table style="margin-left:0px;width:646px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </td> 
 <td style="vertical-align:baseline;width:606px;"> <code style="margin-left:0px;">WebSettings webSettings = mWebView.getSettings();</code> <code style="margin-left:0px;">webSettings.setJavaScriptEnabled(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">webSettings.setCacheMode(WebSettings.LOAD_DEFAULT); </code> <code style="margin-left:0px;">webSettings.setDomStorageEnabled(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);&nbsp; </code> <code style="margin-left:0px;">webSettings.setDatabaseEnabled(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">webSettings.setAppCacheEnabled(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">); </code> <code style="margin-left:0px;">webSettings.setAllowFileAccess(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">webSettings.setSavePassword(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">webSettings.setSupportZoom(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">webSettings.setBuiltInZoomControls(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">); </code> <code style="margin-left:0px;">&nbsp;</code><code style="margin-left:0px;">/**</code> <code style="margin-left:0px;">&nbsp;&nbsp;</code><code style="margin-left:0px;">* 用WebView显示图片，可使用这个参数 设置网页布局类型：</code> <code style="margin-left:0px;">&nbsp;&nbsp;</code><code style="margin-left:0px;">* 1、LayoutAlgorithm.NARROW_COLUMNS ：适应内容大小</code> <code style="margin-left:0px;">&nbsp;&nbsp;</code><code style="margin-left:0px;">* 2、LayoutAlgorithm.SINGLE_COLUMN : 适应屏幕，内容将自动缩放</code> <code style="margin-left:0px;">&nbsp;&nbsp;</code><code style="margin-left:0px;">*/</code> <code style="margin-left:0px;">webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);</code> <code style="margin-left:0px;">webSettings.setUseWideViewPort(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">); </code> &nbsp; <code style="margin-left:0px;">mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);</code> <code style="margin-left:0px;">mWebView.setHorizontalScrollbarOverlay(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">mWebView.setHorizontalScrollBarEnabled(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">mWebView.requestFocus();</code> </td> 
 </tr> 
 </tbody> 
</table>

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

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">mWebView.setWebChromeClient(</code><code style="margin-left:0px;">new</code> <code style="margin-left:0px;"> MyWebChromeClient());</code> </td> 
 </tr> 
 </tbody> 
</table>

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

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">mWebView.setWebViewClient(</code><code style="margin-left:0px;">new</code> <code style="margin-left:0px;"> MyWebViewClient());</code> </td> 
 </tr> 
 </tbody> 
</table>

4、设置addJavascriptInterface方法  
使Js调用Native本地Java对象,实现本地Java代码和HTML页面进行交互，  
注意:因为安全问题的考虑 Google在使用Android API 17以上的版本的时候 需要通过@JavascriptInterface来注解的Java函数才能被识别可以被Js调用。

三、设置当前网页的链接仍在WebView中跳转，而不是跳到手机浏览器里显示，  
在WebViewClient的子类中重写shouldOverrideUrlLoading函数 代码如下：

<table style="margin-left:0px;width:622px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 8 </td> 
 <td style="vertical-align:baseline;width:590px;"> <code style="margin-left:0px;">webView.setWebViewClient(</code><code style="margin-left:0px;">new</code> <code style="margin-left:0px;"> WebViewClient() {&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;</code>&nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">@Override</code>&nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">public</code> <code style="margin-left:0px;"> boolean</code> <code style="margin-left:0px;"> shouldOverrideUrlLoading(WebView view, String url) {&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">view.loadUrl(url);&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">return</code> <code style="margin-left:0px;"> true</code><code style="margin-left:0px;">;&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}&nbsp; </code> <code style="margin-left:0px;">});</code> </td> 
 </tr> 
 </tbody> 
</table>

shouldOverrideUrlLoading表示当前webView中的一个新url需要加载时，给当前应用程序一个处理机会，如果没有重写此函数，webView请求ActivityManage选择合适的方式处理请求，就像弹出uc和互联网让用户选择浏览器一样。重写后return true表示让当前程序处理，return false表示让当前webView处理  
  
四、设置开始加载网页、加载完成、加载错误时处理  
在WebViewClient子类中分别重写如下父类函数 代码如下：

<table style="margin-left:0px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 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 </td> 
 <td style="vertical-align:baseline;"> <code style="margin-left:0px;">webView.setWebViewClient(</code><code style="margin-left:0px;">new</code> <code style="margin-left:0px;"> WebViewClient() {&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;</code>&nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">@Override</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">public</code> <code style="margin-left:0px;"> void</code> <code style="margin-left:0px;"> onPageStarted(WebView view, String url, Bitmap favicon) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">super</code><code style="margin-left:0px;">.onPageStarted(view, url, favicon);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">// 开始加载网页时处理 如：显示"加载提示" 的加载对话框</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">DialogManager.showLoadingDialog(</code><code style="margin-left:0px;">this</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}</code> &nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">@Override</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">public</code> <code style="margin-left:0px;"> void</code> <code style="margin-left:0px;"> onPageFinished(WebView view, String url) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">super</code><code style="margin-left:0px;">.onPageFinished(view, url);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">// 网页加载完成时处理&nbsp; 如：让 加载对话框 消失</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">DialogManager.dismissLoadingDialog();</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}</code> &nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">@Override</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">public</code> <code style="margin-left:0px;"> void</code> <code style="margin-left:0px;"> onReceivedError(WebView view, </code><code style="margin-left:0px;">int</code> <code style="margin-left:0px;"> errorCode, String description, String failingUrl) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">super</code><code style="margin-left:0px;">.onReceivedError(view, errorCode, description, failingUrl);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">// 加载网页失败时处理&nbsp; 如：</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">view.loadDataWithBaseURL(</code><code style="margin-left:0px;">null</code><code style="margin-left:0px;">,</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">"&lt;span style="</code><code style="margin-left:0px;">\"color:#FF0000\"</code><code style="margin-left:0px;">"&gt;网页加载失败&lt;/span&gt;"</code><code style="margin-left:0px;">,</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">"text/html"</code><code style="margin-left:0px;">,</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">"utf-8"</code><code style="margin-left:0px;">,</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">null</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}&nbsp; </code> <code style="margin-left:0px;">});</code> </td> 
 </tr> 
 </tbody> 
</table>

五、处理https请求，为WebView处理ssl证书设置  
WebView默认是不处理https请求的，页面显示空白，需要进行如下设置  
在WebViewClient子类中重写父类的onReceivedSslError函数 代码如下：

<table style="margin-left:0px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 </td> 
 <td style="vertical-align:baseline;"> <code style="margin-left:0px;">webView.setWebViewClient(</code><code style="margin-left:0px;">new</code> <code style="margin-left:0px;"> WebViewClient() {&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;</code>&nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">@Override</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">public</code> <code style="margin-left:0px;"> void</code> <code style="margin-left:0px;"> onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">handler.proceed();&nbsp; </code><code style="margin-left:0px;">// 接受信任所有网站的证书</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">// handler.cancel();&nbsp;&nbsp; // 默认操作 不处理</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">// handler.handleMessage(null);&nbsp; // 可做其他处理</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">} </code> <code style="margin-left:0px;">});</code> </td> 
 </tr> 
 </tbody> 
</table>

六、显示页面加载进度  
在WebChromeClient子类中重写父类的onProgressChanged函数 代码如下：

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td style="vertical-align:baseline;width:573px;"> <code style="margin-left:0px;">webView.setWebChromeClient(</code><code style="margin-left:0px;">new</code> <code style="margin-left:0px;"> WebChromeClient() {&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;</code>&nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">public</code> <code style="margin-left:0px;"> void</code> <code style="margin-left:0px;"> onProgressChanged(WebView view, </code><code style="margin-left:0px;">int</code> <code style="margin-left:0px;"> progress) {&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">setTitle(</code><code style="margin-left:0px;">"页面加载中，请稍候..."</code> <code style="margin-left:0px;"> + progress + </code><code style="margin-left:0px;">"%"</code><code style="margin-left:0px;">);&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">setProgress(progress * </code><code style="margin-left:0px;">100</code><code style="margin-left:0px;">);&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;</code>&nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">if</code> <code style="margin-left:0px;"> (progress == </code><code style="margin-left:0px;">100</code><code style="margin-left:0px;">) {&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">setTitle(R.string.app_name);&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}&nbsp; </code> <code style="margin-left:0px;">});</code> </td> 
 </tr> 
 </tbody> 
</table>

onProgressChanged通知应用程序当前页面加载的进度  
progress表示当前页面加载的进度，为1至100的整数  
  
七、back键控制网页后退  
Activity默认的back键处理为结束当前Activity，WebView查看了很多网页后，希望按back键返回上一次浏览的页面，这个时候我们就需要覆盖WebView所在Activity的onKeyDown函数，告诉他如何处理，代码如下：

<table style="margin-left:0px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 </td> 
 <td style="vertical-align:baseline;"> <code style="margin-left:0px;">public</code> <code style="margin-left:0px;"> boolean</code> <code style="margin-left:0px;"> onKeyDown(</code><code style="margin-left:0px;">int</code> <code style="margin-left:0px;"> keyCode, KeyEvent event) {&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">if</code> <code style="margin-left:0px;"> (webView.canGoBack() &amp;&amp; event.getKeyCode() == KeyEvent.KEYCODE_BACK &amp;&amp; event.getRepeatCount() == </code><code style="margin-left:0px;">0</code><code style="margin-left:0px;">) {&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">webView.goBack();&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">return</code> <code style="margin-left:0px;"> true</code><code style="margin-left:0px;">;&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">return</code> <code style="margin-left:0px;"> super</code><code style="margin-left:0px;">.onKeyDown(keyCode, event);&nbsp; </code> <code style="margin-left:0px;">}</code> </td> 
 </tr> 
 </tbody> 
</table>

其中webView.canGoBack()在webView含有一个可后退的浏览记录时返回true  
webView.goBack();表示返回至webView的上次访问页面

八、使用addJavascriptInterface完成和js交互  
1、Js中调Native本地Java方法  
设置webView的addJavascriptInterface方法，该方法有两个参数，第一个参数为被绑定到js中的类实例，第二个参数为在js中暴露的类别名，在js中引用java对象就是用这个名字  
在Native Java代码如下：

<table style="margin-left:0px;width:638px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 </td> 
 <td style="vertical-align:baseline;width:598px;"> <code style="margin-left:0px;">mWebView.getSettings().setJavaScriptEnabled(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">mWebView.addJavascriptInterface(</code><code style="margin-left:0px;">new</code> <code style="margin-left:0px;"> JavaScriptInterface(</code><code style="margin-left:0px;">this</code><code style="margin-left:0px;">), </code><code style="margin-left:0px;">"Android"</code><code style="margin-left:0px;">);</code> &nbsp; <code style="margin-left:0px;">class</code> <code style="margin-left:0px;"> JavaScriptInterface{ </code> &nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">Context mContext;</code> &nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">/** Instantiate the interface and set the context */</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">JavaScriptInterface(Context c) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">mContext = c;</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}</code> &nbsp; <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">/** Show a toast from the web page </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">* 由Js调用执行Native本地Java方法</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">*/</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">@JavascriptInterface</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">public</code> <code style="margin-left:0px;"> void</code> <code style="margin-left:0px;"> showToast(String toast) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">Log.d(</code><code style="margin-left:0px;">"TAG"</code><code style="margin-left:0px;">, </code><code style="margin-left:0px;">"Js Invoker Native Function"</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code style="margin-left:0px;">}</code> </td> 
 </tr> 
 </tbody> 
</table>

在HTML中Js调用Native方法 代码如下：

<table style="margin-left:0px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 </td> 
 <td style="vertical-align:baseline;width:675px;"> <code style="margin-left:0px;">&lt;input type=</code><code style="margin-left:0px;">"button"</code> <code style="margin-left:0px;"> value=</code><code style="margin-left:0px;">"Say hello"</code> <code style="margin-left:0px;"> onclick=</code><code style="margin-left:0px;">"showAndroidToast('Hello Android!')"</code><code style="margin-left:0px;">&gt;</code> &nbsp; <code style="margin-left:0px;">&lt;script type=</code><code style="margin-left:0px;">"text/javascript"</code><code style="margin-left:0px;">&gt;</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">function showAndroidToast(toast) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">Android.showToast(toast);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}</code> <code style="margin-left:0px;">&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

2、Java调Js方法  
比如在HTML中有如下Js函数

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">&lt;script type=</code><code style="margin-left:0px;">"text/javascript"</code><code style="margin-left:0px;">&gt;</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">function showAlert() { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">alert(</code><code style="margin-left:0px;">"Be executed by Native"</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}</code> <code style="margin-left:0px;">&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

在Native调Js方法如下：

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">mWebView.loadUrl(</code><code style="margin-left:0px;">"javascript：showAlert()"</code><code style="margin-left:0px;">);</code> </td> 
 </tr> 
 </tbody> 
</table>

九、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，都使用缓存中的数据。  
  
如示例代码：

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">WebSettings webSettings = mWebView.getSettings();</code> <code style="margin-left:0px;">webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);&nbsp; </code><code style="margin-left:0px;">//设置 缓存模式&nbsp; </code> <code style="margin-left:0px;">// 开启 DOM storage API 功能&nbsp; </code> <code style="margin-left:0px;">webSettings.setDomStorageEnabled(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);&nbsp; </code> <code style="margin-left:0px;">//开启 database storage API 功能&nbsp; </code> <code style="margin-left:0px;">webSettings.setDatabaseEnabled(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> </td> 
 </tr> 
 </tbody> 
</table>

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

<table style="margin-left:0px;width:623px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td style="vertical-align:baseline;width:583px;"> <code style="margin-left:0px;">String cacheDirPath = getCacheDir().getAbsolutePath()+ </code><code style="margin-left:0px;">"/webViewCache "</code><code style="margin-left:0px;">;</code> <code style="margin-left:0px;">WebSettings webSettings = mWebView.getSettings();</code> <code style="margin-left:0px;">//开启 database storage API 功能&nbsp; </code> <code style="margin-left:0px;">webSettings.setDatabaseEnabled(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);&nbsp;&nbsp;&nbsp; </code> <code style="margin-left:0px;">//设置数据库缓存路径&nbsp; </code> <code style="margin-left:0px;">webSettings.setDatabasePath(cacheDirPath); </code> <code style="margin-left:0px;">//开启Application H5 Caches 功能&nbsp; </code> <code style="margin-left:0px;">webSettings.setAppCacheEnabled(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">); </code> <code style="margin-left:0px;">//设置Application Caches 缓存目录&nbsp; </code> <code style="margin-left:0px;">webSettings.setAppCachePath(cacheDirPath);</code> </td> 
 </tr> 
 </tbody> 
</table>

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

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 7 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">public</code> <code style="margin-left:0px;"> void</code> <code style="margin-left:0px;"> int</code> <code style="margin-left:0px;"> () { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">if</code><code style="margin-left:0px;">(Build.VERSION.SDK_INT &gt;= </code><code style="margin-left:0px;">19</code><code style="margin-left:0px;">) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">webView.getSettings().setLoadsImagesAutomatically(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">} </code><code style="margin-left:0px;">else</code> <code style="margin-left:0px;"> { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">webView.getSettings().setLoadsImagesAutomatically(</code><code style="margin-left:0px;">false</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}</code> <code style="margin-left:0px;">}</code> </td> 
 </tr> 
 </tbody> 
</table>

同时在WebView的WebViewClient子类中重写onPageFinished()方法添加如下代码：

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 4 5 6 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">@Override</code> <code style="margin-left:0px;">public</code> <code style="margin-left:0px;"> void</code> <code style="margin-left:0px;"> onPageFinished(WebView view, String url) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">if</code><code style="margin-left:0px;">(!webView.getSettings().getLoadsImagesAutomatically()) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">webView.getSettings().setLoadsImagesAutomatically(</code><code style="margin-left:0px;">true</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">}</code> <code style="margin-left:0px;">}</code> </td> 
 </tr> 
 </tbody> 
</table>

从上面的代码，可以看出我们对系统API在19以上的版本作了兼容。因为4.4以上系统在onPageFinished时再恢复图片加载时,如果存在多张图片引用的是相同的src时，会只有一个image标签得到加载，因而对于这样的系统我们就先直接加载。

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

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">&lt;/application&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

2、Activity级别：控制每个activity是否开启硬件加速，只需在activity元素中添加android:hardwareAccelerated属性即可

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">&lt;/activity&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

3、Window级别：注：目前还不支持在Window级别上关闭硬件加速

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">getWindow().setFlags(</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED，</code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);</code> </td> 
 </tr> 
 </tbody> 
</table>

4、View级别：运行时单个view硬件加速，目前Android还不支持在View级别开启硬件加速 代码如下：

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">mView.setLayerType(View.LAYER_TYPE_SOFTWARE, </code><code style="margin-left:0px;">null</code><code style="margin-left:0px;">);</code> </td> 
 </tr> 
 </tbody> 
</table>

\[//TODO 关于Android硬件加速 小吕有时间会更详细的单独整理成一篇来做介绍   
先提供学习地址：http://android.toolib.net/guide/topics/graphics/hardware-accel.[html][] \]  
  
我们开启硬件加速后，WebView渲染页面更加快速，拖动也更加顺滑。但有个副作用就是容易会出现页面加载白块同时界面闪烁现象。解决这个问题的方法是设置WebView暂时关闭硬件加速 代码如下：

<table style="margin-left:0px;width:613px;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:baseline;"> 1 2 3 </td> 
 <td style="vertical-align:baseline;width:581px;"> <code style="margin-left:0px;">if</code> <code style="margin-left:0px;"> (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.HONEYCOMB) { </code> <code style="margin-left:0px;">&nbsp;&nbsp;&nbsp;&nbsp;</code><code style="margin-left:0px;">webview.setLayerType(View.LAYER_TYPE_SOFTWARE, </code><code style="margin-left:0px;">null</code><code style="margin-left:0px;">);</code> <code style="margin-left:0px;">}</code> </td> 
 </tr> 
 </tbody> 
</table>

十二、其他注意事项：  
1> 从网络上下载html页面的过程应放在工作线程(后台线程)中  
2> html下载成功后渲染出html的步骤应放在UI主线程,不然WebView加载网页过程会容易报错

来源： [http://www.2cto.com/kf/201411/354679.html][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();
        }
    }
    );
     s

**Android WebView常见问题解决方案汇总:**

**就目前而言，如何应对版本的频繁更新呢，又如何灵活多变地展示我们的界面呢,这又涉及到了web app与native app之间孰优孰劣的争论. 于是乎,一种混合型的app诞生了,灵活多变的部分，如淘宝商城首页的活动页面，一集凡客诚品中我们都可以见到web 页面与native页面的混合，既利用了web app的灵活易更新，也借助了native app本身的效率.  
当然，就会用到webview这样的一个控件，这里，我把自己使用过程中遇到的一些问题整理下来.**

**首先上张图对WebView进行一个基本的回顾:**

**以上思维导图原文件下载地址:**

**[http://download.csdn.net/detail/t12x3456/6509195][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清理： ##

1.  CookieSyncManager.createInstance(**this**);   
2.  CookieSyncManager.getInstance().startSync();   
3.  CookieManager.getInstance().removeSessionCookie();

3.清理cache 和历史记录:

1.  webView.clearCache(**true**);   
2.  webView.clearHistory();

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

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:

@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 = "<html><body bgcolor=\"" + "black"  
                 + "\">  <embed src=\"" + url + "\" width=\"" + "100%"  
                 + "\" height=\"" + "90%" + "\" scale=\"" + "noscale"  
                 + "\" type=\"" + "application/x-shockwave-flash"  
                 + "\"> </embed></body></html>";  
 String mimeType = "text/html";  
 String encoding = "utf-8";  
 web.loadDataWithBaseURL("null", temp, mimeType, encoding, "");

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

mWebView.getSettings().setSupportZoom(true);  
            mWebView.getSettings().setBuiltInZoomControls(true);  
            if (DeviceUtils.hasHoneycomb())  
                  mWebView.getSettings().setDisplayZoomControls(false);

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

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

8月份更新:

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

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

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

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

WebChromeClient webChromeClient = new WebChromeClient() {    
                @Override    
                public void onReceivedTitle(WebView view, String title) {    
                    super.onReceivedTitle(view, title);    
                     
                    txtTitle.setText(title);    
                }    
        
            };

但是发现在小米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][http_blog.csdn.net_leehong2005_article_details_11808557]

还有一个开源项目可以参考: [https://github.com/pedant/safe-java-js-webview-bridge][https_github.com_pedant_safe-java-js-webview-bridge], 该项目利用onJsPrompt() 替代了addJavaScriptInterface(),(解决方案类似上述参考的博客)同时增加了异步回调,

很好地解决了webview  js注入的安全问题.

10月份更新:

**14.WebView页面中播放了音频,退出Activity后音频仍然在播放**

需要在Activity的onDestory()中调用

**\[java\]** [view plain][] [copy][view plain]  [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  webView.destroy();

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

10-10 15:01:11.402: E/ViewRootImpl(7502): sendUserActionEvent() mView == null  
    10-10 15:01:26.818: E/webview(7502): java.lang.Throwable: Error: WebView.destroy() called while still attached!  
    10-10 15:01:26.818: E/webview(7502):    at android.webkit.WebViewClassic.destroy(WebViewClassic.java:4142)  
    10-10 15:01:26.818: E/webview(7502):    at android.webkit.WebView.destroy(WebView.java:707)  
    10-10 15:01:26.818: E/webview(7502):    at com.didi.taxi.ui.webview.OperatingWebViewActivity.onDestroy(OperatingWebViewActivity.java:236)  
    10-10 15:01:26.818: E/webview(7502):    at android.app.Activity.performDestroy(Activity.java:5543)  
    10-10 15:01:26.818: E/webview(7502):    at android.app.Instrumentation.callActivityOnDestroy(Instrumentation.java:1134)  
    10-10 15:01:26.818: E/webview(7502):    at android.app.ActivityThread.performDestroyActivity(ActivityThread.java:3619)  
    10-10 15:01:26.818: E/webview(7502):    at android.app.ActivityThread.handleDestroyActivity(ActivityThread.java:3654)  
    10-10 15:01:26.818: E/webview(7502):    at android.app.ActivityThread.access$1300(ActivityThread.java:159)  
    10-10 15:01:26.818: E/webview(7502):    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1369)  
    10-10 15:01:26.818: E/webview(7502):    at android.os.Handler.dispatchMessage(Handler.java:99)  
    10-10 15:01:26.818: E/webview(7502):    at android.os.Looper.loop(Looper.java:137)  
    10-10 15:01:26.818: E/webview(7502):    at android.app.ActivityThread.main(ActivityThread.java:5419)  
    10-10 15:01:26.818: E/webview(7502):    at java.lang.reflect.Method.invokeNative(Native Method)  
    10-10 15:01:26.818: E/webview(7502):    at java.lang.reflect.Method.invoke(Method.java:525)  
    10-10 15:01:26.818: E/webview(7502):    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1187)  
    10-10 15:01:26.818: E/webview(7502):    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)  
    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][view plain]  [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  rootLayout.removeView(webView);  
2.  webView.destroy();

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

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

(1) 在js中完成:

处理android.selection.longTouch

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

**[https://github.com/btate/BTAndroidWebViewSelection][https_github.com_btate_BTAndroidWebViewSelection]**

**  ** (2) 安卓层处理:

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

来源： [http://blog.csdn.net/t12x3456/article/details/13769731/][http_blog.csdn.net_t12x3456_article_details_13769731]

[Link 1]: http://www.2cto.com/kf/201411/354679.html#
[Link 2]: http://www.2cto.com/soft
[html]: http://www.2cto.com/kf/qianduan/css/
[http_www.2cto.com_kf_201411_354679.html]: http://www.2cto.com/kf/201411/354679.html
[http_download.csdn.net_detail_t12x3456_6509195]: http://download.csdn.net/detail/t12x3456/6509195
[http_blog.csdn.net_leehong2005_article_details_11808557]: http://blog.csdn.net/leehong2005/article/details/11808557
[https_github.com_pedant_safe-java-js-webview-bridge]: https://github.com/pedant/safe-java-js-webview-bridge
[view plain]: http://blog.csdn.net/t12x3456/article/details/13769731/#
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/80391/fork
[https_github.com_btate_BTAndroidWebViewSelection]: https://github.com/btate/BTAndroidWebViewSelection
[http_blog.csdn.net_t12x3456_article_details_13769731]: http://blog.csdn.net/t12x3456/article/details/13769731/