Android—WebView 基础知识

// 激活 WebView 为活跃状态，能正常执行网页的响应
webView.onResume(); //当页面失去焦点被切换到后台不可见状态，需要执行 onPause
// 通过 onPause 动作通知内核暂停所有的动作，比如 DOM 解析、plugin 的执行，JavaScript 执行
webView.onPause(); //当应用程序(存在 webView)被切换到后台时，这个方法不仅仅针对当前的webview而时全局的全应用的webview
//它会暂停所有的 webview 的 layout, parsion, javaScripttimer。降低 CPU 功耗。webView.pauseTimers()
//恢复 pauseTimers 状态
webView.resumeTimers(); //销毁 WebView
// 在关闭了 Activity 时，如果 WebView 的音乐或视频还在播放，就必须销毁 WebView
// 注意：webview 调用 destory 时，webview 仍绑定在 Activity 上
// 这是由于自定义 webview 构建时传入了该 Activity 的 context 对象
// 因此需要先从父容器中移除 webview 然后再销毁 webview
rootLayout.removeView(webview);
webview.destory();

3.1.2 前进/后退网页

// 是否可以后退
Webview.canGoBack()
// 后退网页
Webview.goBack()

// 是否可以前进
Webview.canGoForward()
// 前进网页
Webview.goForward()

// 以当前的 index 为起始点前进或者后退到历史记录中指定的 steps
// 如果 steps 为负数则为后退，正数则为前进
Webview.goBackOrForward(intsteps)

常见用法：Back 键控制网页后退

$bullet$ 问题：在不做任何处理前提下，浏览网页时点击系统的 “Back” 键，整个 Brow ser 会调用 finish() 而结束自身

$bullet$ 目标：点击返回后，是网页回退而不是退出浏览器

$bullet$ 解决方案：在当前 Activity 中处理并消费掉该 Back 事件

public boolean onKeyDown(int keyCode, KeyEvent event){
    if((keyCode == KEYCODE_BACK) &amp;&amp; (mWebView.canGoBack()){
        mWebView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

3.1.3 清楚缓存 数据

// 清除网页访问留下的缓存
// 由于内核缓存是全局的，因此这个方法不仅仅针对 webview 而是针对整个应用程序
Webview.clearCache(true);

// 清楚当前 webview 访问的历史记录
// 只会 webview 访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory();
 // 这个 API 仅仅清楚自动完成填充的表单数据，并不会清除 webview 存储到本地的数据
webview.clearFormData();

3.2 WebView 常用子类

3.2.1 WebSetting s 类

$bullet$ 作用：对 WebView 进行配置和管理

$bullet$ 配置步骤 & 常见方法：

配置步骤1：添加网络权限（AndroidManifest.xml）这是前提！

<uses-permission android:name="android.permission.INTERNET"/>

配置步骤2：生成一个 WebView 组件（两种方式）

// 方式1：直接在 Activity 中生成
WebView webView = new WebView(this)

// 方式2：在 Activity 的 layout 文件里添加 webview 控件；
WebView webview = (WebView) findViewById(R.id.webview)

配置步骤3：进行配置–利用 WebSettings 子类（常见方法）

// 声明 WebSettings 子类
WebSettings webSettings = webView.getSettings();

// 如果访问的页面要与 JavaScript 交互，则 webview 必须设置支持 JavaScript
webSettings.setJavaScriptEnabled(true);

// 支持插件
webSettings.setPluginEnabled(true);

// 设置自适应屏幕，两者合用
webSettings.setUseWideViewPort(true); // 将图片调整到适合 webview 的大小
webSettings.setLoadWithOverviewMode(ture); // 缩放至屏幕的大小

// 缩放操作
webSettings.setSupportZoom(true); // 支持缩放，默认为 true, 是下面那个的前提；
webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
webSettings.setDisplayZoomControls(flase); //隐藏原生的缩放控件

// 其它细节操作
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 
webSettings.setAllowFileAccess(true); //设置可以访问文件 
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 
webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

常见用法：设置 WebView 缓存

$bullet$ 当加载 html 页面时，WebView 会在 /data/data/包名目录下生成 database 与 cache 两个文件夹

$bullet$ 请求的 URL 记录保存在 WebViewCache.db，而 URL 的内容是在 WebViewCache 文件夹下

$bullet$ 是否启用缓存：

// 优先使用缓存：
WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
// 缓存模式如下：
// LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
// LOAD_DEFAULT: （默认）根据 cache-control 决定是否从网络上获取数据
// LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
// LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者 no-cache，都使用缓存中的数据

WebView.getSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);

$bullet$ 结合使用（离线加载）

if(NetStatusUtil.isConnected(getApplicationContext())){
    // 根据 cache-control 决定是否从网上获取数据
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
    } else{
        // 没网，则从本地获取，即离线加载
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        }

webSettings.setDomStorageEnabled(true); // 开启 DOM storage API 功能
webSettings.setDatabaseEnabled(true); // 开启 database storage API 功能
webSettings.setAppCacheEnabled(true); // 开启 Application Caches 功能

String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACHE_DIRNAME;
webSettings.setAppCachePath(cacheDirPath); // 设置 Application Caches 缓存目录

注意：每个 App li cat ion 只调用一次 WebSettings.setAp pCachePath(), WebSettings.setAppCacheMaxSize()。

3.2.2 WebViewClient 类

$bullet$ 作用：处理各种通知 & 请求事件

$bullet$ 常见方法：

常见方法1：shouldOverr ideUrlLoa ding()

$bullet$ 作用：打开网页时不调用系统浏览器，而是在本地 WebView 中显示；在网页上的所有加载都经过这个方法，这个函数我们可以做很多操作。

// 步骤1，定义 Webview 组件
Webview webview = (Webview) findViewById(R.id.webView1);

// 步骤2，选择加载方式
    // 方式1，加载一个网页：
webView.loadUrl("https://www.google.com/");

    // 方式2，加载 apk 包中的 html 页面
webView.loadUrl("file:///android_asset/test.html");

    // 方式3，加载手机本地的 html 页面
webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");

// 步骤3，复写shouldOverrideUrlLoading() 方法，使得打开网页时不调用系统浏览器，而是在本地 webView 中显示
webView.setWebViewClient(new WebViewClient(){
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
          view.loadUrl(url);
      return true;
      }
  });

常用方法2：onPageStarted()

$bullet$ 作用：开始载入页面时调用，我们可以设定一个 loading 的页面，告诉用户程序在等待网络响应。

webView.setWebViewClient(new WebViewClient(){
      @Override
      public void  onPageStarted(WebView view, String url, Bitmap favicon) {
         //设定加载开始的操作
      }
  });

常用方法3：onPageFinished()

$bullet$ 作用：在页面加载结束时调用。我们可以关闭 loading 条，切换程序动作。

webView.setWebViewClient(new WebViewClient(){
      @Override
      public void onPageFinished(WebView view, String url) {
         //设定加载结束的操作
      }
  });

常用方法4：onLoadResource()

$bullet$ 作用：在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次

 webView.setWebViewClient(new WebViewClient(){
      @Override
      public boolean onLoadResource(WebView view, String url) {
         //设定加载资源的操作
      }
  });

常用方法5：onReceivedError()

$bullet$ 作用：加载页面的服务器出错时调用。

App 里面使用 webview 控件的时候遇到了诸如404这类错误的时候，若也显示浏览器里面的那种错误提示页面就显得很丑陋，那么这个时候我们的 app 就需要加载一个本地的错误提示页面，即 webview 如何加载一个本地的页面。

//步骤1：写一个html文件（error_handle.html），用于出错时展示给用户看的提示页面
//步骤2：将该html文件放置到代码根目录的assets文件夹下

//步骤3：复写WebViewClient的onRecievedError方法
//该方法传回了错误码，根据错误类型可以进行不同的错误分类处理
webView.setWebViewClient(new WebViewClient(){
      @Override
      public void onReceivedError(WebView view, int errorCode, String description, String             
                                    failingUrl){
                switch(errorCode)
                {
                case HttpStatus.SC_NOT_FOUND:
                    view.loadUrl("file:///android_assets/error_handle.html");
                    break;
                }
            }
        });

常用方法6：onReceivedSsIError()

$bullet$ 作用：处理 https 请求

webview 默认是不处理 https 请求的，页面显示空白，需要进行如下设置：


webView.setWebViewClient(new WebViewClient() {    
        @Override    
        public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {    
            handler.proceed();    //表示等待证书响应
        // handler.cancel();      //表示挂起连接，为默认方式
        // handler.handleMessage(null);    //可做其他处理
        }    
    });

3.2.3 WebChromeClient 类

$bullet$ 作用：辅助 WebView 处理 JavaScript 的对话框、网站图标、网站标题等等。

$bullet$ 常见方法：

常用方法1：onProgressChanged()

$bullet$ 作用：获得网页加载进度并显示

webview.setWebChromeClient(new WebChromeClient(){

      @Override
      public void onProgressChanged(WebView view, int newProgress) {
          if (newProgress < 100) {
              String progress = newProgress + "%";
              progress.setText(progress);
            } else {
        }
    });

常用方法2：onReceivedTitle()

$bullet$ 作用：获取 web 页中的标题

webview.setWebChromeClient(new WebChromeClient(){

    @Override
    public void onReceivedTitle(WebView view, String title) {
       titleview.setText(title)；  
 }

3.3 注意事项

如何避免 WebView 内存泄漏？

不在 xml 中定义 webview，而是在需要的时候在 Activity 中创建，并且 Context 使用 getApplicat ionContext()

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
mWebView = new WebView(getApplicationContext());
mWebView.setLayoutParams(params);
mLayout.addView(mWebView);

在 Activity 销毁（WebView）的时候，先让 WebView 加载 null 内容，然后移除 WebView，再销毁 WebView，最后置空。

@Override
    protected void onDestroy() {
        if (mWebView != null) {
            mWebView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
            mWebView.clearHistory();

            ((ViewGroup) mWebView.getParent()).removeView(mWebView);
            mWebView.destroy();
            mWebView = null;
        }
        super.onDestroy();
    }