这段时间基于项目需要 在开发中与WebView的接触比较多，前段时间关于HTML5规范尘埃落定的消息出现在各大IT社区头版上，更有人说：HTML5将颠覆原生App开发 虽然我不太认同这一点 但是关于HTML5+JS+CSS+Native的跨平台开发模式还是为很多企业节省了开发资源和成本、一定程度上提升了WebView的使用率和地位。

网上关于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加载网页过程会容易报错

Android WebKit相关推荐

  1. Android webkit 事件传递流程

    前言:基于android webview 上定制自己使用的可移植浏览器apk,遇到好多按键处理的问题.所以索***了一下keyevent 事件的传递流程. frameworks 层 keyevent ...

  2. Android之library class android.webkit.WebViewClient depends on program class android.net.http.SslErro

    1 问题 编译chromium的源代码的时候,在主类的actitivity里面插入了加载webview的代码 编译错误提示如下 library class android.webkit.WebView ...

  3. 解决android webkit的css postion:fixed支持问题

    android webkit不能支持postion:fixed,导致无法设计网页上的菜单在页面上下滚动时固定在一个位置.解决方法如下:在Html中加入以下meta属性(适用于android 2.2)& ...

  4. Error inflating class android.webkit.WebView

    最近项目中遇到一个关于WebView的问题,报错:Error inflating class android.webkit.WebView 特此记录一下解决方案(这里是针对如下配置问题的对应方案,不符 ...

  5. js调用android.webkit,h5调用原生App的方法合集 window.webkit.messageHandlers

    测试demo 调用原生关闭函数 let u = navigator.userAgent let isAndroid = u.indexOf('Android') > -1 || u.indexO ...

  6. Android从url不产生cookie,如何从android.webkit.CookieManager获取所有cookie或cookie的URL

    主要是,我使用webview进入facebook.所以,我不知道哪些cookie被保存到CookieManager中.我不知道是否可能,但我知道如何做到这一点. 现在,我需要使用Jsoup获取页面.但 ...

  7. WebKit 分析–for android【new】

    Java调WebView, WebView(UI线程)向WebViewCore(WebCore线程)发消息,再由WebViewCore正调BrowserFrame,回调CallbackProxy 网上 ...

  8. WebKit 分析–for android

    一.WebKit简介 WebKit是一个开源的浏览器网页排版引擎,包含WebCore排版引擎和JSCore引擎.WebCore和JSCore引擎来自于KDE项目的KHTML和KJS开源项目.Andro ...

  9. WebKit – WebKit For Android

    如需转载,请注明出处! WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 这是一篇自己写于一年前的工作文档,分享 ...

最新文章

  1. Xcode10 修改代码后，编译没有反应，或者导入头文件没有提示
  2. 特征筛选（随机森林）
  3. python的程序异常类型,Python3.4学习笔记之类型判断，异常处理，终止程序操作小结...
  4. CA证书和TLS介绍
  5. 开发文件服务器,易语言开发文件服务器
  6. 第 3-1 课：集合详解（上） + 面试题
  7. C#中的常量、类型推断和作用域
  8. 单位计算机安全和保密措施,安全管理及保密措施
  9. 详解站长之家之站长工具四大新功能
  10. 显卡内存一直被占用解决方式
  11. 解决微信公众号分享出去的是链接
  12. 如何将Excel文件转换WPS格式？
  13. 分享怎么才能防止域名被劫持
  14. Windows笔记本移动热点打不开
  15. 智能振弦传感器的读取工具振弦采集仪
  16. 汇编语言中逻辑运算符
  17. JESD204标准概述
  18. ESP8266（ESP-12F）+DS18B20+贝壳物联
  19. 2023年度数学建模竞赛汇总
  20. 【AM335x新品发布】 TI Sitara系列TL335x-EVM-S评估板，你知多少？

热门文章

  1. html的细节优化,网站页面优化细节详解
  2. 使用Bootstrap-table创建表单，并且与flask后台进行数据交互
  3. 《MySQL——count()逻辑》
  4. 【C++基础】异常处理机制概要
  5. ASCII码排序（C++）
  6. cobalt strick 4.0 系列教程（6）Payload Artifact 和反病毒规避
  7. HDU 1402——A * B Problem Plus
  8. uva 1347——Tour
  9. python3爬虫学习笔记
  10. mysql 学习笔记07日期相关函数01