一篇文章搞定《玩转WebView》

前言

首先本篇文章是铺垫，为了下一篇的WebView的优化。所以本文还是比较轻松的，都是说的如何去使用，保姆级入门教程哦。

Android WebView在Android平台上是一个特殊的View，它能用来显示网页。

接下来我们也简要了解一下下面这三个部分的内容：

• WebView的常见方法
• WebView常用的子类 （WebSettings类、WebViewClient类、WebChromeClient类）
• WebView和JavaScript的交互
• 开发中常见的问题

WebView的常见方法

WebView的状态相关方法

//激活WebView为活跃状态，能正常执行网页的响应

webView.onResume() ；

//当页面被失去焦点被切换到后台不可见状态，需要执行onPause()
//通过onPause()动作通知内核暂停所有的动作，比如DOM的解析、JavaScript执行等

webView.onPause()；

//当应用程序(存在webview)被切换到后台时，这个方法不仅仅针对当前的webview而是全局的全应用程序的webview
 //它会暂停所有webview的布局显示、解析、延时，从而降低CPU功耗
webView.pauseTimers()

//恢复pauseTimers状态

webView.resumeTimers()；

//销毁Webview //在关闭了Activity时，如果Webview的音乐或视频，还在播放，就必须销毁Webview。
//但是注意：webview调用destory时,webview仍绑定在Activity上
//这是由于自定义webview构建时传入了该Activity的context对象
//因此需要先从父容器中移除webview,然后再销毁webview
rootLayout.removeView(webView);
webView.destroy();

WebView的前进和后退

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

//后退网页
Webview.goBack()

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

//前进网页
Webview.goForward()

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

比如：当不做任何处理时，浏览网页时，点击系统的“Back”键。就会退出当前的Activity。那么，在这里，我们可以做一些处理，让点击“Back”键后，让网页返回上一页而不是直接退出浏览器。

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

WebView的缓存

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

//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()；

//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
Webview.clearFormData()；

WebView常用的子类

WebSettings类

作用：对WebView进行配置和管理，可以设置与Javascript交互、适应屏幕、设置缓存模式等等设置项

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

一些常用的对WebView的设置

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

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

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

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

//webview中缓存设置
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
    //LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
    //LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
    //LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
    //LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据

//设置可以访问文件
webSettings.setAllowFileAccess(true); 
//支持通过JS打开新窗口
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); 
//支持自动加载图片
webSettings.setLoadsImagesAutomatically(true); 
//设置编码格式
webSettings.setDefaultTextEncodingName("utf-8");

WebViewClient类

作用：主要处理webView加载过程中的各种事件，并在其中进行拦截和处理，例如加载开始、加载完成、加载错误、页面跳转等。
设计模式：采用了适配器模式

webView.setWebViewClient(new WebViewClient(){

	//shouldOverrideUrlLoading 则用于拦截 WebView 中的页面跳转请求并做相应处理
	//场景：可以用来拦截特定的 URL 请求，进行重定向或者其他业务逻辑处理，比如处理第三方登录、处理深链接跳转等
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        // 重写shouldOverrideUrlLoading()方法，使得打开网页时不调用系统浏览器， 而是在本WebView中显示
        view.loadUrl(request.getUrl().toString());
        return true;
    }
    
    //shouldInterceptRequest 用于拦截 WebView 发起的网络请求并处理响应结果
    //场景：可以用来实现缓存机制、修改请求头、屏蔽广告等功能。
	@Nullable
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
         //拦截URL，进行解析
         Uri uri = request.getUrl();
         Set<String> collection = uri.getQueryParameterNames();
         new Handler(Looper.getMainLooper()).post(() ->{
              Toast.makeText(aaa.this, "哈哈哈" + collection.size(), Toast.LENGTH_SHORT).show();
         });
         return super.shouldInterceptRequest(view, request);
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // 页面加载的开始，我们可以去启动进度条等加载动画
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        // 页面加载结束，可以去关闭进度条等加载动画
    }

    @Override
    public void onLoadResource(WebView view, String url) {
        // 每次加载资源都会去调用
        // 可以对一些加载资源进行拦截
    }

    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
        // 加载页面的服务器出现错误时（如404）调用。
        // 通常出现错误的时候，不会给用户直接展示404。而是替换本地的错误展示页面
        // 比如本地的一个HTML(自己写一个HTML放在代码根目录的assets文件夹下)
        switch(errorCode) {
            case 404:
                view.loadUrl("file:///android_assets/error.html");
                break;
        }
    }

    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        // 处理https请求
        // webView默认是不处理https请求的，页面显示空白
        handler.proceed(); //表示等待证书响应
        handler.cancel(); //表示挂起连接，为默认方式
        handler.handleMessage(null); //可做其他处理
    }
});

其中需要注意的点为：shouldInterceptRequest 用于拦截 WebView 发起的网络请求并处理响应结果，而 shouldOverrideUrlLoading 则用于拦截 WebView 中的页面跳转请求并做相应处理。两者一般配合使用，通过对网络请求和页面跳转的拦截处理，可以实现更灵活的 WebView 应用，如定制化缓存、拦截广告、处理特定的 URL 等。

WebChromeClient类

作用：主要处理webView中关于页面的各种事件，例如页面标题改变、进度改变、弹窗提示、获取网页信息等
设计模式：采用了适配器模式

webView.setWebChromeClient(new WebChromeClient(){
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        //获得网页的加载进度并显示
        processView.set(newProgress);
    }

    //拦截JS中的三种弹窗
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        // 当网页调用alert()来弹出alert弹出框前回调，用以拦截alert()函数
        return true;
    }

    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        // 当网页调用confirm()来弹出confirm弹出框前回调，用以拦截confirm()函数
        return true;
    }

    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 当网页调用prompt()来弹出prompt弹出框前回调，用以拦截prompt()函数
        return true;
    }

    @Override
    public void onReceivedTitle(WebView view, String title) {
        // 获取标题的
        titleView.setText(title);
    }
});

WebView和JavaScript的交互

WebView和JS的交互，是在开发中经常遇到的需求，下面简单介绍几种交互的方式。

JS调用Android

对于JS调用Android代码的方法有3种：

1. 通过 WebView 的addJavascriptInterface()进行对象映射
2. 通过 WebViewClient 的shouldOverrideUrlLoading()方法回调拦截 url
3. 通过 WebChromeClient 的 onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息

通过 WebView 的addJavascriptInterface()进行对象映射

第一步：准备一个HTML，当然可以是下发的HTML，放在app/src/main/assets/下为js.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebView</title>
    <style>
        body {
            background-color: #f2f2f2;
        }
    </style>
<!--由于对象映射，所以调用jsMethod对象等于调用Android映射的对象-->
    <script>
         function callAndroid(){
            jsMethod.hello("哈哈哈,笑死了");
         }
      </script>
</head>
<body>
<!--触发事件-->
<button type="button" id="button1" onclick="callAndroid()">点击按钮，笑死了</button>
</body>
</html>

第二步：定义一个与JS对象映射关系的Android类：JsMethod()

public class JsMethod{
    //定义JS需要调用的方法，被JS调用的方法必须加入@JavascriptInterface注解
    @JavascriptInterface
    public void hello(String msg){
        Toast.makeText(aaa.this, msg, Toast.LENGTH_SHORT).show();
    }
}

第三步：在Android里通过WebView设置Android类与JS代码的映射

WebSettings webSettings = webView.getSettings();
//设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
//通过addJavascriptInterface和@JavascriptInterface映射hello方法
webView.addJavascriptInterface(new JsMethod(), "jsMethod");
//加载本地的HTML
webView.loadUrl("file:///android_asset/js.html");

通过WebViewClient的shouldOverrideUrlLoading()方法回调拦截url

第一步：还是一样准备一个HTML，当然可以是下发的HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SoarYuan</title>
<!--约定的url协议为：js://webview?arg1=哈哈哈&arg2=呜呜呜-->
    <script>
         function callAndroid(){
            document.location = "js://webview?arg1=哈哈哈&arg2=呜呜呜";
         }
      </script>
</head>

<!-- 点击按钮则调用callAndroid()方法  -->
<body>
<button type="button" id="button2" onclick="callAndroid()">点击按钮，调用Android</button>
</body>
</html>

第二步：在Android通过WebViewClient复写shouldOverrideUrlLoading()
当该JS通过Android的mWebView.loadUrl(“file:///android_asset/javascript.html”)加载后，就会回调shouldOverrideUrlLoading()。

webView.loadUrl("file:///android_asset/js2.html");
webView.setWebViewClient(new WebViewClient() {
    @Nullable
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request){
        //拦截URL，进行解析
        Uri uri = request.getUrl();
        Set<String> collection = uri.getQueryParameterNames();
        new Handler(Looper.getMainLooper()).post(() ->{
            Toast.makeText(aaa.this, "哈哈哈" + collection.size(), Toast.LENGTH_SHORT).show();
        });
        return super.shouldOverrideUrlLoading(view, request);
    }
});

这里一定要重点说一下：shouldInterceptRequest拦截
因为这一种常规，也常见的做法这种方式。

WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)

简单说一下这个项目中常见的方式：利用特定的schema URL：
说白了：也就是通过协定协议进行通信，实现Native端和Web端双向通信的一种机制。
举个例子：约定固定格式的scheme协议

[customscheme:][//methodName][?params={data, callback}]
customscheme：自定义需要拦截的scheme
methodName：需要调用的native的方法
params：传递给native的参数 和 回调函数名

之后我们按照这个协议去发送：

jsbridge://showToast?text=hello

这一眼就知道了，这是让你去showToast，之后内容是hello。
当然这是一种简单的例子，在项目中会根据需求和封装去定义协议格式的（也可以直接用JSbridge三方框架去交互）。

也很简单，我们只需要跟JS那边协商好，到了这边去按照商定的协议格式去解析就行了，不多比比了。
(这里就简单说一下，不细讲了，本篇主要是说简单入门，主要是为了后面的优化做铺垫)

通过 WebChromeClient 的 onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息

具体原理：Android通过 WebChromeClient的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调分别拦截JS对话框（即上述三个方法），得到他们的消息内容，然后解析即可。
第一步：还是一样准备一个HTML，当然可以是下发的HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SoarYuan</title>
    <script>
        function clickprompt(){
            // 调用prompt()
            var result=prompt("js://webview?arg1=哈哈哈&arg2=呜呜呜");
            alert("demo " + result);
        }
      
    </script>
</head>

<!-- 点击按钮则调用clickprompt()  -->
<body>
<button type="button" id="button3" onclick="clickprompt()">点击调用,Android方法</button>
</body>
</html>

第二步：在Android通过WebChromeClient复写onJsPrompt()
当使用mWebView.loadUrl(“file:///android_asset/javascript.html”)加载了上述JS代码后，就会触发回调onJsPrompt()

webView.setWebChromeClient(new WebChromeClient(){
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 注意一般是通过message去传送内容，message是代表promt())的内容。
        Uri uri = Uri.parse(message);
        Set<String> collection = uri.getQueryParameterNames();
        new Handler(Looper.getMainLooper()).post(() ->{
            Toast.makeText(aaa.this, "哈哈哈" + collection.size(), Toast.LENGTH_SHORT).show();
        });
        return super.onJsPrompt(view, url, message, defaultValue, result);
    }
});

Android调用JS

1. 通过WebView的loadUrl()
2. 通过WebView的evaluateJavascript()

建议：两种结合使用，因为WebView的evaluateJavascript()是在Android4.4之后支持的，之前要适配WebView的loadUrl()，一起使用。

通过WebView的loadUrl()

第一步：准备一个HTML，当然可以是下发的HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebView</title>
    <!--Android需要调用的方法-->
    <script>
         function callJS(){
             alert("Android调用了JS的callJS方法");
         }
    </script>
</head>
</html>

第二步：在Android里通过WebView设置调用JS代码
JS代码调用一定要在 onPageFinished() 回调之后才能调用
不然会报错：Uncaught ReferenceError: functionName is not defined

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); // 设置与Js交互的权限
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗

webView.loadUrl("file:///android_asset/js4.html");
button = (Button) findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // 通过Handler发送消息
        webView.post(new Runnable() {
            @Override
            public void run() {
                // 调用javascript的callJS()方法
                webView.loadUrl("javascript:callJS()");
            }
        });
    }
});

// webview只是载体，内容的渲染需要使用webviewChromClient类去实现
// 通过设置WebChromeClient对象处理JavaScript的对话框
webView.setWebChromeClient(new WebChromeClient());

通过WebView.evaluateJavascript()-Android4.4之后

• 比第一种方法效率更高、使用更简洁。Android 4.4 后才可使用
• 该方法的执行不会使页面刷新，而第一种方法（loadUrl ）的执行则会。

webView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
    @Override 
    public void onReceiveValue(String value) { 
        //此处为 js 返回的结果     
    }
}); 

正常使用需要混合使用

因为带适配Android 4.4之前的版本

if (Build.VERSION.SDK_INT < 18) {
    webView.loadUrl("javascript:callJS()");
} else {
    webView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

JS带回调的调用

上面已经说到了APP、Web间双向通信的方法。
但站在一端而言还是一个单向通信的过程 ，比如站在Web的角度：Web调用APP的方法，APP直接相关操作但无法将结果返回给Web，但实际使用中会经常需要将操作的结果返回，也就是JS回调。

实现原理

其实这种回调就是基于之前的单向通信去实现的
我们在一端调用的时候在参数中加一个callbackId标记对应的回调，对端接收到调用请求后，进行实际操作，如果带有callbackId，对端再进行一次调用，将结果、callbackId回传回来，这端根据callbackId匹配相应的回调，将结果传入执行就可以了。
也就是说其实回调的调用，也就是两次单项通信实现的。

整个例子

Web端代码

<body>
  <div>
    <button id="showBtn">获取APP输入，以Web弹窗展现</button>
  </div>
</body>
<script>
  let id = 1;
  // 根据id保存callback
  const callbackMap = {};
  // 使用JSSDK封装调用与APP通信的事件，避免过多的污染全局环境
  window.JSSDK = {
    // 获取APP端输入框value，带有回调
    getNativeEditTextValue(callback) {
      const callbackId = id++;
      callbackMap[callbackId] = callback;
      // 调用JSB方法，并将callbackId传入
      window.NativeBridge.getNativeEditTextValue(callbackId);
    },
    // 接收APP端传来的callbackId
    receiveMessage(callbackId, value) {
      if (callbackMap[callbackId]) {
        // 根据ID匹配callback，并执行
        callbackMap[callbackId](value);
      }
    }
  };

        const showBtn = document.querySelector('#showBtn');
  // 绑定按钮事件
  showBtn.addEventListener('click', e => {
    // 通过JSSDK调用，将回调函数传入
    window.JSSDK.getNativeEditTextValue(value => window.alert('APP输入值：' + value));
  });
</script>

Android端代码

webView.addJavascriptInterface(new NativeBridge(this), "NativeBridge");

class NativeBridge {
  private Context ctx;
  NativeBridge(Context ctx) {
    this.ctx = ctx;
  }

  // 获取APP端输入值
  @JavascriptInterface
  public void getNativeEditTextValue(int callbackId) {
    MainActivity mainActivity = (MainActivity)ctx;
    // 获取APP端输入框的value
    String value = mainActivity.editText.getText().toString();
    // 需要注入在Web执行的JS代码
    String jsCode = String.format("window.JSSDK.receiveMessage(%s, '%s')", callbackId, value);
    // 在UI线程中执行
    mainActivity.runOnUiThread(new Runnable() {
      @Override
      public void run() {
        mainActivity.webView.evaluateJavascript(jsCode, null);
      }
    });
  }
}

在Web端点击按钮，会获取APP端输入框的值，并将值以Web端弹窗展现，这样就实现了Web->APP带有回调的JSB调用，同理APP->Web也是同样的逻辑，不同的只是将callback保存在APP端罢了

开发中出现的问题

shouldInterceptRequest 和 shouldOverrideUrlLoading

shouldInterceptRequest 和 shouldOverrideUrlLoading 都是 WebView 的方法，用于拦截 WebView 中的网络请求和页面跳转。

1. shouldInterceptRequest：

   • 作用：拦截 WebView 发起的网络请求。
   • 方法签名：WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)
   • 参数说明：
     • view：当前 WebView 对象。
     • request：代表当前请求的 WebResourceRequest 对象，包含请求的 URL、请求头、请求方法等信息。
   • 返回值：WebResourceResponse 对象，用于返回拦截后的响应数据给 WebView。可以通过 WebResourceResponse 构造函数传入自定义的数据。
   • 场景：可以用来实现缓存机制、修改请求头、屏蔽广告等功能。

2. shouldOverrideUrlLoading：

   • 作用：拦截 WebView 中的页面跳转请求。
   • 方法签名：boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
   • 参数说明：
     • view：当前 WebView 对象。
     • request：代表当前请求的 WebResourceRequest 对象，包含请求的 URL、请求头、请求方法等信息。
   • 返回值：boolean，返回 true 表示拦截该请求，不再加载该网页；返回 false 表示继续加载该网页。
   • 场景：可以用来拦截特定的 URL 请求，进行重定向或者其他业务逻辑处理，比如处理第三方登录、处理深链接跳转等。

总结：
shouldInterceptRequest 用于拦截 WebView 发起的网络请求并处理响应结果，而 shouldOverrideUrlLoading 则用于拦截 WebView 中的页面跳转请求并做相应处理。两者一般配合使用，通过对网络请求和页面跳转的拦截处理，可以实现更灵活的 WebView 应用，如定制化缓存、拦截广告、处理特定的 URL 等。

WebView内存泄漏的问题

可以分为三点进行解决：

• 不在XML中初始化，直接在代码中new出来，添加到布局中
  • 当在xml布局文件中定义了一个WebView时，WebView会被添加到视图层级中，并且被视为一个视图对象而被持有。在Activity或Fragment销毁时，如果没有及时释放WebView对象，就会导致WebView的内存泄露。
  • 相比之下，通过代码将WebView实例化并添加到视图层级中，可以更加灵活地控制WebView的生命周期。在Activity或Fragment销毁时，在相应的生命周期方法（如onDestroy）中调用WebView的destroy()方法来释放WebView对象，从而避免WebView的内存泄露。
• 不要让 WebView 持有对 Activity/Fragment 的 Context 引用
  • WebView 内存泄露的主要原因是引用了 Activity/Fragment 的 Context，加之 WebView 本身的设计问题，导致 Activity/Fragment 无法被即时释放，既然 WebView 无法即时释放 Context，因此使用全局的Context去解决这个问题。

// 让 WebView 使用 ApplicationContext
WebView webview = new WebView(this.applicationContext)

• 销毁时，停止 WebView 的加载，并从父控件中将其移除

@Override
protected void onDestroy() {
    if (webView != null) {
        webView.removeAllViews();
        ((ViewGroup) webView.getParent()).removeView(webView);
        webView.setTag(null);
        webView.clearHistory();
        webView.destroy();
        webView = null;
    }
}

补充1：其实新版的webView（在Android6.0）以上，webView泄漏的问题已经被官方解决了，但是还是建议加上这些方案，避免不必要的问题发生。
补充2：如果使用的是单独进程的话，就没这个问题了，直接杀死进程就完事了。

Alert无法弹出

没有设置WebChromeClient,按照以下代码设置：

• webview只是载体，内容的渲染需要使用webviewChromClient类去实现
• 通过设置WebChromeClient对象处理JavaScript的对话框

webView.setWebChromeClient(new WebChromeClient());

Uncaught ReferenceError: functionName is not defined

原因：页面没加载完，找不到JS方法
调用等待onPageFinished() 回调之后

@Override
public void onPageFinished(WebView view, String url) {
     // 页面加载结束，可以去关闭进度条等加载动画
}

Uncaught TypeError: Object [object Object] has no method

• 没加@JavascriptInterface注释
• 代码混淆问题：在混淆文件加入映射的JS调用类

在proguard-rules.pro中添加混淆。
-keepattributes *Annotation*
        -keepattributes *JavascriptInterface*
        -keep public class xx.xxx.JsMethod{
    public <methods>;
}
其中xx.xxx..JsMethod 是不需要混淆的类

总结

奥利给！！！！