1. 首页
  2. Android
  3. Android WebView 的使用

Android WebView 的使用

2019/03/05 12:12:07 发表 2019/04/20 14:44:33 更新 原创 素颜 615 1 0

WebView 是 Android 中一个非常实用的组件，它内置了WebKit引擎，WebKit是一个开源的浏览器引擎，Chrome浏览器也是基于它，所以我们可以把WebView当做一个轻量级的浏览器使用。 WebView 可以使得网页轻松的内嵌到 app 里，还可以直接跟 js 相互调用。

1、添加网络权限

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

2、WebSettings 对访问页面进行设置。

  1. WebView mWebView = new WebView(this);
  3. WebSettings webSettings = mWebView .getSettings(); // 支持获取手势焦点，输入用户名、密码或其他
  5. mWebView.requestFocusFromTouch();
  7. webSettings.setJavaScriptEnabled(true); // 支持js
  9. webSettings.setUseWideViewPort(true); // 将图片调整到适合 webview 的大小
  11. webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
  13. webSettings.setSupportZoom(true); // 支持缩放，默认为 true。是下面那个的前提。
  15. webSettings.setBuiltInZoomControls(true); // 设置内置的缩放控件。
  17. webSettings.setDisplayZoomControls(false); // 隐藏原生的缩放控件
  19. webSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); // 支持内容重新布局
  21. webSettings.supportMultipleWindows(); // 多窗口
  23. webSettings.setAllowFileAccess(true); // 设置可以访问文件
  25. webSettings.setNeedInitialFocus(true); // 当 webview 调用 requestFocus 时为 webview 设置节点
  27. webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 支持通过 JS 打开新窗口
  29. webSettings.setLoadsImagesAutomatically(true); // 支持自动加载图片
  31. webSettings.setDefaultTextEncodingName("utf-8"); // 设置编码格式
  33. webSettings.setDatabaseEnabled(true); // 设置支持本地存储
  35. String path = getActivity().getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();  // 取得缓存路径
  37. webSettings.setDatabasePath(path); // 设置缓存路径
  39. webSettings.setDomStorageEnabled(true); // 设置支持DomStorage
  41. webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);  // 设置存储模式
  43. //webSettings。setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK) ;//关闭webview中缓存
  45. webSettings.setAppCacheEnabled(true);  // 设置支持缓存
  47. mWebView.requestFocus();

3、页面加载方式

  1. // 加载一个网页：
  3. mWebView.loadUrl("https://www.baidu.com/");
  5. // 加载 apk assets目录文件中的一个 html 页面
  7. mWebView.loadUrl("file:///android_asset/test.html");
  9. // 加载手机本地的一个 html 页面的方法：
  11. mWebView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");

4、WebView 的两个重要方法 WebViewClient 和 WebChromeClient

WebViewClient 就是帮助 WebView 处理各种通知、请求事件的。

  1. // 打开网页时不调用系统浏览器，而是在本 WebView 中显示：
  2. mWebView.setWebViewClient(new WebViewClient(){
  4.  @Override
  5.     public boolean shouldOverrideUrlLoading(WebView view, String url) {
  6.         view.loadUrl(url);
  7.         return true;
  8.     }
  9. });
  10. // 将上面定义的 webviewclinet 设置给 webview
  11. mWebView.setWebViewClient(webViewClient);

下面介绍 WebView 的一些事件：

  1. WebViewClient mWebViewClient = new WebViewClient()
  2. {
  3.     //在网页上的所有加载都经过这个方法,这个函数我们可以做很多操作。
  4.     //比如获取url，查看url.contains(“add”)，进行添加操作
  5.     shouldOverrideUrlLoading(WebView view, String url);
  7.     //重写此方法才能够处理在浏览器中的按键事件。
  8.     shouldOverrideKeyEvent(WebView view, KeyEvent event);
  10.     //这个事件就是开始载入页面调用的，我们可以设定一个loading的页面，告诉用户程序在等待网络响应。
  11.     onPageStarted(WebView view, String url, Bitmap favicon) ;
  13.     //在页面加载结束时调用。同样道理，我们可以关闭loading 条，切换程序动作。
  14.     onPageFinished(WebView view, String url);
  16.     // 在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。
  17.     onLoadResource(WebView view, String url) ;
  19.     // (报告错误信息)
  20.     onReceivedError(WebView view, int errorCode, String description, String failingUrl);
  22.     //(更新历史记录)
  23.     doUpdateVisitedHistory(WebView view, String url, boolean isReload);
  25.     //(应用程序重新请求网页数据)
  26.     onFormResubmission(WebView view, Message dontResend, Message resend);
  28.     //（获取返回信息授权请求）
  29.     onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm);
  31.     //重写此方法可以让webview处理https请求。
  32.     onReceivedSslError(WebView view, SslErrorHandler handler, SslError error);
  34.     // (WebView发生改变时调用)
  35.     onScaleChanged(WebView view, float oldScale, float newScale);
  37.     //（Key事件未被加载时调用）
  38.     onUnhandledKeyEvent(WebView view, KeyEvent event);
  39. }

WebChromeClient 是辅助 WebView 处理 Javascript 的对话框，网站图标，网站 title，加载进度等。

  1. WebChromeClient mWebChromeClient = new WebChromeClient() {
  3.     // 获得网页的加载进度，显示在右上角的 TextView 控件中
  4.     @Override
  5.     public void onProgressChanged(WebView view, int newProgress) {
  6.         if (newProgress < 100) {
  7.             String progress = newProgress + "%";
  8.         } else {
  9.         }
  10.     }
  11.     // 获取 Web 页中的 title 用来设置自己界面中的 title
  12.     // 当加载出错的时候，比如无网络，这时 onReceiveTitle 中获取的标题为 找不到该网页,
  13.     // 因此建议当触发 onReceiveError 时，不要使用获取到的 title
  14.     @Override
  15.     public void onReceivedTitle(WebView view, String title) {
  16.         MainActivity.this.setTitle(title);
  17.     }
  18.     @Override
  19.     public void onReceivedIcon(WebView view, Bitmap icon) {
  20.         //
  21.     }
  22.     @Override
  23.     public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
  24.         //
  25.         return true;
  26.     }
  27.     @Override
  28.     public void onCloseWindow(WebView window) {
  29.     }
  30.     // 处理 alert 弹出框，html 弹框的一种方式
  31.     @Override
  32.     public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
  33.         //
  34.         return true;
  35.     }
  36.     // 处理 confirm 弹出框
  37.     @Override
  38.     public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult
  39.             result) {
  40.         //
  41.         return true;
  42.     }
  43.     // 处理 prompt 弹出框
  44.     @Override
  45.     public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
  46.         //
  47.         return true;
  48.     }
  49. };
  51. // 同样，将上面定义的 WebChromeClient 设置给 WebView ：
  52. webView.setWebChromeClient(mWebChromeClient);

WebChromeClient 调用 Android 相机和相册

  1. private int CAMERA_CODE_REQUEST = 0;
  2. private ValueCallback<Uri> mUploadMessage;
  3. private ValueCallback<Uri[]> mUploadCallbackAboveL;
  4. public static final int FILECHOOSER_RESULTCODE = 5173;
  5. public static final int FILECHOOSER_RESULTCODE_FOR_ANDROID_5 = 5174;
  7. /**
  8.  * 申请拍照权限
  9.  */
  10. public static final int REQUEST_ACCESS_COARSE_CAMERA = 00002;
  12. /**
  13.  * 拍照裁剪
  14.  */
  15. private Uri imageUri;
  17. mWebView.setWebChromeClient(new WebChromeClient() {
  19.     @Override
  20.     public void onReceivedTitle(WebView view, String webtitle) {
  21.         super.onReceivedTitle(view, webtitle);
  22.     }
  24.     @Override
  25.     public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
  26.          callback.invoke(origin, true, false);
  27.          super.onGeolocationPermissionsShowPrompt(origin, callback);
  28.     }
  30.     // For Android < 3.0
  31.     public void openFileChooser(ValueCallback<Uri> uploadMsg) {
  32.         this.openFileChooser(uploadMsg, "*/*");
  33.     }
  35.     // For Android >= 3.0
  36.     public void openFileChooser(ValueCallback<Uri> uploadMsg,String acceptType) {
  37.         Log.e("acceptType", acceptType);
  38.         this.openFileChooser(uploadMsg, acceptType, null);
  39.     }
  41.     // For Android >= 4.1
  42.     public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
  43.         Log.e("acceptType", acceptType + "capture" + capture);
  44.         CAMERA_CODE_REQUEST = FILECHOOSER_RESULTCODE;
  45.         mUploadMessage = uploadMsg;
  47.         openCamera();
  48.     }
  50.     @Override
  51.     @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  52.     public boolean onShowFileChooser(WebView mWebView,ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
  53.         CAMERA_CODE_REQUEST = FILECHOOSER_RESULTCODE_FOR_ANDROID_5;
  54.         mUploadCallbackAboveL = filePathCallback;
  55.         openCamera();
  56.         return true;
  57.      }
  58. });
  60. /**
  61. * 这里是权限处理，大家可以使用各自的方法进行处理
  62. */
  63. public void openCamera() {
  64.     //
  65.     PermissionHelper.with(this)
  66.             .requestCode(REQUEST_ACCESS_COARSE_CAMERA)
  67.             .requestPermission(Manifest.permission.CAMERA, Manifest.permission.WRITE_EXTERNAL_STORAGE)
  68.             .request();
  69. }
  71. /**
  72.  * 拍照权限申请成功BLUETOOTH
  73.  */
  74. @PermissionSucceed(requestCode = REQUEST_ACCESS_COARSE_CAMERA)
  75. public void onSuccess() {
  76.     showCameraAction();
  77. }
  79. /**
  80.  * 拍照权限申请失败
  81.  */
  82. @PermissionFail(requestCode = REQUEST_ACCESS_COARSE_CAMERA)
  83. private void onFail() {
  84.     UIHelper.getSystemHintToast(this, "您拒绝了拍照权限，将不能正常拍照");
  85. }
  87. /**
  88.  * 调用摄像头和相册添加图片
  89.  */
  90. protected void showCameraAction() {
  92.     File file = FileUtils.getNewFile();
  93.     imageUri = getUriForFile(this, file);
  94.     final List<Intent> cameraIntents = new ArrayList<>();
  95.     final Intent captureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
  96.     final List<ResolveInfo> listCam = getPackageManager().queryIntentActivities(captureIntent, 0);
  97.     for (ResolveInfo res : listCam) {
  98.         final String packageName = res.activityInfo.packageName;
  99.         final Intent i = new Intent(captureIntent);
  100.         i.setComponent(new ComponentName(res.activityInfo.packageName, res.activityInfo.name));
  101.         i.setPackage(packageName);
  102.         i.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
  103.         cameraIntents.add(i);
  104.     }
  105.     Intent i = new Intent(Intent.ACTION_GET_CONTENT);
  106.     i.addCategory(Intent.CATEGORY_OPENABLE);
  107.     i.setType("image/*");
  108.     Intent chooserIntent = Intent.createChooser(i, "图片上传");
  109.     chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, cameraIntents.toArray(new Parcelable[]{}));
  110.     startActivityForResult(chooserIntent, CAMERA_CODE_REQUEST);
  112. }
  114. protected Uri getUriForFile(Context context, File file) {
  115.     if (context == null || file == null) {
  116.         throw new NullPointerException();
  117.     }
  118.     Uri uri;
  119.     if (Build.VERSION.SDK_INT >= 24) {
  120.         uri = FileProvider.getUriForFile(context.getApplicationContext(), "com.realname.selfhelpdeclara.fileprovider", file);
  121.     } else {
  122.         uri = Uri.fromFile(file);
  123.     }
  124.     return uri;
  125. }
  127. @Override
  128. protected void onActivityResult(int requestCode, int resultCode, Intent data) {
  129.     super.onActivityResult(requestCode, resultCode, data);
  130.     if (requestCode == FILECHOOSER_RESULTCODE) {
  132.         if (null == mUploadMessage) {
  133.             return;
  134.         }
  135.         Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
  137.         if (result != null) {
  138.             mUploadMessage.onReceiveValue(result);
  139.         } else {
  140.             if (resultCode == RESULT_OK) {
  141.                 mUploadMessage.onReceiveValue(imageUri);
  142.             } else {
  143.                 mUploadMessage.onReceiveValue(null);
  144.             }
  145.         }
  147.         mUploadMessage = null;
  149.     } else if (requestCode == FILECHOOSER_RESULTCODE_FOR_ANDROID_5) {
  151.         if (null == mUploadCallbackAboveL) {
  152.             return;
  153.         }
  155.         Uri result = (data == null || resultCode != RESULT_OK) ? null : data.getData();
  157.         if (result != null) {
  158.             mUploadCallbackAboveL.onReceiveValue(new Uri[]{result});
  159.         } else {
  160.             if (resultCode == RESULT_OK) {
  161.                 Uri[] results = new Uri[]{imageUri};
  162.                 mUploadCallbackAboveL.onReceiveValue(results);
  163.             } else {
  164.                 mUploadCallbackAboveL.onReceiveValue(null);
  165.             }
  166.         }
  167.         mUploadCallbackAboveL = null;
  168.     }
  169. }

5、调用 JS 代码

  1. WebSettings webSettings = mWebView .getSettings();
  3. webSettings.setJavaScriptEnabled(true); // 这里必须设置
  5. mWebView.addJavascriptInterface(new InsertObj(), "jsObj");

以下方法是 Android 和 JS 的交互

  1. public class InsertObj extends Object {
  2.  private static Activity mActivity;
  3.  private static WebView mWebView;
  5.  public InsertObj(Activity activity, WebView webView) {
  6.   mActivity = activity;
  7.   mWebView = webView;
  8.  }
  9.  // 给 html 提供的方法，js 中可以通过：var str = window.jsObj.HtmlcallJava(); 获取到
  10.  @JavascriptInterface
  11.  public String HtmlcallJava() {
  12.   return "Html call Java";
  13.  }
  14.  // 给 html 提供的有参函数 ： window.jsObj.HtmlcallJava2("IT-homer blog");
  15.  @JavascriptInterface
  16.  public String HtmlcallJava2(final String result) {
  17.   return "Html call Java : " + result;
  18.  }
  19.  // Html 给我们提供的函数
  20.  @JavascriptInterface
  21.  public static void JavacallHtml() {
  22.   mActivity.runOnUiThread(new Runnable() {
  23.    @Override
  24.    public void run() {
  25.     // 这里是调用方法
  26.     mWebView.loadUrl("javascript: showFromHtml()");
  27.     Toast.makeText(mActivity, "clickBtn", Toast.LENGTH_SHORT).show();
  28.    }
  29.   });
  30.  }
  31.  // Html 给我们提供的有参函数
  32.  @JavascriptInterface
  33.  public static void JavacallHtml2(final String param) {
  34.   mActivity.runOnUiThread(new Runnable() {
  35.    @Override
  36.    public void run() {
  37.     mWebView.loadUrl("javascript: showFromHtml2('"+param+"')");
  38.     Toast.makeText(mActivity, "clickBtn2", Toast.LENGTH_SHORT).show();
  39.    }
  40.   });
  41.  }
  42. }
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  5. <title>无标题 1</title>
  6. <script type="text/javascript">
  8.    function HtmlcallJava(){
  9.             var str = window.jsObj.HtmlcallJava();
  10.             alert(str);
  11.         }
  13.    function HtmlcallJava2(){
  14.              var str = window.jsObj.HtmlcallJava2("HTML");
  15.              alert(str);
  16.         }
  18.   function showFromHtml()
  19.   {
  20.    alert("我是js方法，我被Android后台调用");
  21.   }
  23.   function showFromHtml2(result)
  24.   {
  25.    alert("我是js方法，我被Android后台调用  "+result);
  26.   }
  28.     </script>
  29. </head>
  30. <body>
  31. <button onclick="HtmlcallJava()">HtmlcallJava</button>
  32. <button onclick="HtmlcallJava2()">HtmlcallJava2</button>
  33. <input type="file" accept="image/*" id="capture" capture="camera">
  34. </body>
  35. </html>

8、设置 Cookie

  1. public void setCookies(String cookie) {
  2.     if (!TextUtils.isEmpty(cookie)) {
  3.         String[] cookieArray = cookie.split(";");// 多个Cookie是使用分号分隔的
  4.         for (int i = 0; i < cookieArray.length; i++) {
  5.             int position = cookieArray[i].indexOf("=");// 在Cookie中键值使用等号分隔
  7.             if (position != -1) {
  8.                 String cookieName = cookieArray[i].substring(0, position);// 获取键
  9.                 String cookieValue = cookieArray[i].substring(position + 1);// 获取值
  10.                 String value = cookieName + "=" + cookieValue;// 键值对拼接成 value
  11.                 Log.i("cookie", value);
  12.                 CookieManager.getInstance().setCookie(getDomain(url), value);// 设置 Cookie
  14.             }
  15.         }
  16.     }
  17. }
  19. /**
  20.  * 获取URL的域名
  21.  */
  22. private String getDomain(String url) {
  23.     url = url.replace("http://", "").replace("https://", "");
  24.     if (url.contains("/")) {
  25.         url = url.substring(0, url.indexOf('/'));
  26.     }
  27.     return url;
  28. }

7、WebView 返回键，返回上一页而不是退出浏览器

  1. @Override
  2. public boolean onKeyDown(int keyCode, KeyEvent event) {
  3.     if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
  4.         mWebView.goBack();
  5.         return true;
  6.     }
  7.     return super.onKeyDown(keyCode, event);
  8. }

8、销毁 WebView

  1. @Override
  2. protected void onDestroy(){
  3.     if (mWebview != null) {
  4.         mWebview.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
  5.         mWebview.clearHistory();
  6.         ((ViewGroup) mWebview.getParent()).removeView(mWebview);
  7.         mWebview.destroy();
  8.         mWebview = null;
  9.     }
  10.     return super.onDestroy();
  11. }

（完）