update

6 years ago · 4b77e97993
parent fdfd932cb4
commit 4b77e97993
1 changed files with 449 additions and 0 deletions
--- a/blogs/WebView.md
+++ b/blogs/WebView.md
@ -0,0 +1,449 @@
+---
+WebView
+---
+
+#### 目录
+
+1. 思维导图
+2. WebView 的基本使用
+   - WebView
+   - WebSettings
+   - WebViewClient
+   - WebChromeClient
+3. WebView 与 JS 交互
+   - Android 去调用 JS 代码
+   - JS 调用 Android 代码
+4. WebView 常见问题汇总
+5. WebView 优化
+6. 参考
+
+#### 思维导图
+
+![](https://i.loli.net/2018/11/25/5bf9f14c0204b.png)
+
+#### 基本使用
+
+WebView 是一个基于 webkit 引擎，展示 web 页面的空间。WebView 在低版本和高版本采用了不同的 webkit 内核版本，4.4 ( API 19 ) 之后直接使用了 Chrome。
+
+##### WebView 类
+
+```java
+    /**
+     * Back 键后退网页
+     * 如果又重写了 onBackPressed 方法，只会回调 onKeyDown
+     */
+    @Override
+    public boolean onKeyDown(int keyCode, KeyEvent event) {
+        if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
+            mWebView.goBack();
+            return true;
+        }
+        return super.onKeyDown(keyCode, event);
+    }
+	mWebView.onPasue();
+    //清除缓存数据
+    mWebView.clearCache(true);	//清除缓存
+    mWebView.clearHistory();	//清除浏览记录
+    mWebView.clearFormData();	//清除自动填充的表单数据
+```
+
+##### WebSetting 类
+
+对 WebView 进行配置和管理。
+
+```java
+    private void setWebViewSettings(WebView webView){
+        WebSettings webSettings=webView.getSettings();
+        webSettings.setJavaScriptEnabled(true); //支持 JS
+        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过 JS 打开新的窗口
+        //设置自适应屏幕
+        webSettings.setUseWideViewPort(true);
+        webSettings.setLoadWithOverviewMode(true);
+
+        webSettings.setLoadsImagesAutomatically(true);  //设置自动加载图片
+        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);    //不使用缓存
+		//...
+    }
+```
+
+##### WebViewClient 类
+
+处理各种通知和请求事件等等。
+
+```java
+//在当前 WebView 打开页面，而不是系统浏览器
+//如果不需要转发处理，只需要传递一个 WebViewClent 实例，根本不需要重写 shouldOverrideUrlLoading 方法     
+public class MyWebViewClient extends WebViewClient {
+
+    private Context mContext;
+
+    public MyWebViewClient(Context context) {
+        mContext = context;
+    }
+
+    @Override
+    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
+        //当前 WebView 处理
+        if (request.getUrl().getHost().equals("https://www.example.com")) {
+            return false;
+        }
+        //如果需要转发处理
+        mContext.startActivity(new Intent(Intent.ACTION_VIEW, request.getUrl()));
+        return true;
+    }
+
+    @Override
+    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
+        switch (error.getErrorCode()){
+            case WebViewClient.ERROR_CONNECT:   //连接失败
+                view.loadUrl("file:///android_asset/error.html");
+                break;
+        }
+    }
+
+    @Override
+    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
+        handler.proceed();  //等待证书响应 
+        //handler.cancel();   //挂起连接 默认行为
+    }
+}
+
+mWebView.setWebViewClient(new MyWebViewClient(MainActivity.this));
+```
+
+##### WebChromeClient 类
+
+辅助 WebView 处理 JS 的对话框、网站标题等等。
+
+```java
+public class MyWebChromeClient extends WebChromeClient {
+
+    /**
+     * 网页加载进度
+     */
+    @Override
+    public void onProgressChanged(WebView view, int newProgress) {
+        super.onProgressChanged(view, newProgress);
+    }
+
+    /**
+     * 网页标题加载完毕回调
+     */
+    @Override
+    public void onReceivedTitle(WebView view, String title) {
+        super.onReceivedTitle(view, title);
+    }
+
+    /**
+     * 拦截输入框
+     */
+    @Override
+    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
+        return super.onJsPrompt(view, url, message, defaultValue, result);
+    }
+
+    /**
+     * 拦截确认框
+     */
+    @Override
+    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
+        return super.onJsConfirm(view, url, message, result);
+    }
+
+    /**
+     * 拦截弹框
+     */
+    @Override
+    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
+        return super.onJsAlert(view, url, message, result);
+    }
+}
+
+
+mWebView.setWebChromeClient(new MyWebChromeClient());
+```
+
+#### WebView 与 JS 交互
+
+##### Android 调用 JS 代码
+
+- webView.loadUrl(url)
+- webView.evaluateJavascript()
+
+首先选准备一个静态文件：
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Title</title>
+    <script>
+   function callJS(){
+      alert("Android调用了 JS 的 callJS() 方法");
+   }
+    </script>
+    <p3>
+        WebView 与 JS 交互！
+    </p3>
+</head>
+</html>
+```
+
+第一种方式：loadUrl()
+
+```java
+        mWebView.loadUrl("javascript:callJS()");
+        mWebView.setWebChromeClient(new WebChromeClient(){
+            @Override
+            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
+                AlertDialog dialog=new AlertDialog.Builder(WebViewContactActivity.this)
+                        .setTitle("Title")
+                        .setPositiveButton("确认", new DialogInterface.OnClickListener() {
+                            @Override
+                            public void onClick(DialogInterface dialog, int which) {
+                                result.confirm();
+                            }
+                        })
+                        .setCancelable(false)
+                        .setMessage(message)
+                        .create();
+                dialog.show();
+                return true;
+            }
+        });
+```
+
+可以看到，WebView 只是载体，内容的渲染还的通过 WebChromeClient 承载。
+
+第二种方式：evaluateJavascript()
+
+```java
+        mWebView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
+            @Override
+            public void onReceiveValue(String value) {
+                //JS 返回的结果
+                Toast.makeText(WebViewContactActivity.this, "value " + value, Toast.LENGTH_SHORT).show();
+            }
+        });
+```
+
+只是把上面的 loadUrl 换成 evaluateJavascript 方法而已。但是这种方法比第一种方式效率高，因为该方法的执行不会使页面刷新。
+
+两种方法的对比：
+
+| 调用方式            | 优点     | 缺点                       | 使用场景                           |
+| ------------------- | -------- | -------------------------- | ---------------------------------- |
+| loadUrl             | 方便简洁 | 效率低                     | 不需要获取返回值，对性能要求较低时 |
+| evaluatedJavascript | 效率高   | 向下兼容性差（ API > 19 ） | API > 19                           |
+
+当然也可以通过 Build.VERSION 来进行判断执行。
+
+##### JS 调用 Android 代码
+
+- 通过 WebView.addJavascriptInterface 进行对象映射
+- 通过 WebViewClient.shouldOverrideUrlLoading 方法回调拦截 url
+- 通过 WebChromeClient 的 onJsAlert、onJsConfirm、onJsPrompt 方法回调拦截 JS 对话框 alert、confirm、prompt 消息
+
+第一种方式：WebView.addJavascriptInterface 进行对象映射
+
+首先先准备好资源文件，用于模拟 WebView 加载的网页：
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Demo</title>
+    <script>
+         function callAndroid(){
+            test.hello("js调用了android中的hello方法");
+         }
+      </script>
+</head>
+<body>
+<p2>JS 调用 Android 方法</p2>
+<button type="button" id="button1" onclick="callAndroid()">点击按钮调用 Android 的 hello 方法</button>
+</body>
+</html>
+```
+
+然后定义一个 JS 对象映射关系的 Android 类：
+
+```java
+public class JSObject extends Object {
+
+    private Context mContext;
+
+    public JSObject(Context context) {
+        mContext = context;
+    }
+
+    @JavascriptInterface
+    public void hello(String msg){
+        Toast.makeText(mContext, "JS 调用了 Android 的 hello 方法", Toast.LENGTH_SHORT).show();
+    }
+}
+```
+
+最后就是通过 WebView 设置 Android 类与 JS 代码的映射：
+
+```java
+mWebView.loadUrl("file:///android_asset/js_to_android.html");
+mWebView.addJavascriptInterface(new JSObject(this),"test");
+```
+
+第二种方式：WebViewClient.shouldOverrideUrlLoading 方法回调拦截 url
+
+Android 通过 WebViewClient 的回调方法 shouldOverrideUrlLoading 拦截 url，解析该 url 协议，如果检测到是预先约定好的协议，就调用 Android 相应的方法。
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Demo</title>
+    <script>
+         function callAndroid(){
+            document.location = "js://webview?arg1=2333&arg2=222";
+         }
+      </script>
+</head>
+<body>
+<p2>JS 调用 Android 方法</p2>
+<button type="button" id="button1" onclick="callAndroid()">点击按钮调用 Android 的方法</button>
+</body>
+</html>
+```
+
+```java
+mWebView.loadUrl("file:///android_asset/js_call_android.html");
+        mWebView.setWebViewClient(new WebViewClient(){
+            @Override
+            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
+                if ("js".equals(request.getUrl().getScheme())){
+                    if ("webview".equals(request.getUrl().getAuthority())){
+                        Toast.makeText(WebViewContactActivity.this, "JS 调用 Android 方法，参数一为："+request.getUrl().getQueryParameter("arg1"), Toast.LENGTH_SHORT).show();
+                    }
+                    return true;
+                }
+                return super.shouldOverrideUrlLoading(view, request);
+            }
+        });
+```
+
+第三种方式：通过 WebChromeClient 的 onJsAlert、onJsConfirm、onJsPrompt 方法回调拦截 JS 对话框的消息
+
+这里只示例 onJsPrompt 的回调，因为这个方法可以返回任意类型的值。
+
+```java
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Demo</title>
+    <script>
+         function callAndroid(){
+            var result=prompt("js://demo?arg1=111&arg2=222");
+            alert("demo " + result);
+         }
+      </script>
+</head>
+<body>
+<p2>JS 调用 Android 方法</p2>
+<button type="button" id="button1" onclick="callAndroid()">点击按钮调用 Android 的方法</button>
+</body>
+</html>
+```
+
+```java
+       mWebView.loadUrl("file:///android_asset/js_call_android_demo.html");
+        mWebView.setWebChromeClient(new WebChromeClient(){
+            @Override
+            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
+                Uri uri=Uri.parse(message);
+                if ("js".equals(uri.getScheme())){
+                    if ("demo".equals(uri.getAuthority())){
+                        result.confirm("JS 调用了 Android 的方法");
+                    }
+                    return true;
+                }
+                return super.onJsPrompt(view, url, message, defaultValue, result);
+            }
+        });
+```
+
+三种方式的比较：
+
+| 调用方式                                                     | 优点       | 缺点                     | 使用场景                           |
+| ------------------------------------------------------------ | ---------- | ------------------------ | ---------------------------------- |
+| WebView.addJavascriptInterface 对象映射                      | 方便简洁   | Android 4.2 一下存在漏洞 | Android 4.2 以上相对简单的应用场景 |
+| WebViewClient.shouldOverrideUrlLoading 回调拦截              | 不存在漏洞 | 使用复杂，需要协议约束   | 不需要返回值情况下                 |
+| WebChormeClient.onJsAlert / onJsConfirm / onJsPrompt 方法回调拦截 | 不存在漏洞 | 使用复杂，需要协议约束   | 能满足大多数场景                   |
+
+#### WebView 常见问题
+
+1. WebView 销毁
+
+   ```java
+       @Override
+       protected void onDestroy() {
+           super.onDestroy();
+           if (mWebView != null) {
+               mWebView.loadDataWithBaseURL("", null, "text/html", "utf-8", null);
+               mWebView.clearHistory();
+               ((ViewGroup) mWebView.getParent()).removeView(mWebView);
+               mWebView.destroy();
+               mWebView = null;
+           }
+       }
+   ```
+
+2. Android P 阻止加载任何 http 的请求
+
+   Mainfest 中加入：
+
+   ```
+   android:usesCleartextTraffic="true"
+   ```
+
+3. Android 5.0 之后 WebView 禁止加载 http 与 https 混合内容
+
+   ```java
+   if (Build.VERSION.SDK_INT>Build.VERSION_CODES.LOLLIPOP){
+             mWebView.getSettings().
+                 setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
+           }
+   ```
+
+4. WebView 开启硬件加速导致的问题
+
+   比如不能打开 PDF，播放视频花屏等等。
+
+   关闭硬件加速，或者直接用第三方库吧。
+
+#### WebView 优化
+
+1. 给 WebView 加一个加载进度条
+
+   重写 WebChromeClient 的 onProgressChanged 方法。
+
+2. 提高 HTML 网页加载速度，等页面 finsh 在加载图片
+
+   ```java
+   public void int () {
+       if(Build.VERSION.SDK_INT >= 19) {
+           webView.getSettings().setLoadsImagesAutomatically(true);
+       } else {
+           webView.getSettings().setLoadsImagesAutomatically(false);
+       }
+   }
+   ```
+
+3. 自定义 WebView 错误页面
+
+   重写 WebViewClient 的 onReceivedError 方法。
+
+#### 参考
+
+[https://www.jianshu.com/p/b9164500d3fb](https://www.jianshu.com/p/b9164500d3fb)