WebView：Android-H5交互
16lz
2021-01-24
WebView是一个基于WebKit引擎、展现Web页面的控件。Android的WebView在低版本和高版本采用了不同的WebKit版本内核，Android4.4后使用的是Chrome内核。
目录
1、WebView的常见方法
2、WebSettings类：对WebView进行配置和管理
3、WebViewClient类：处理各种通知 & 请求事件
4、WebChromeClient类：
5、如何避免WebView内存泄露
6、webView中文件下载
7、往webview注入js
8、Cookie管理
9、Android5.0上 WebView中Http和Https混合问题
10、文件上传、图片选择
11、H5 video全屏播放
12、webview缓存
1、WebView的常见方法
状态：
- webView.onResume() ; //激活WebView为活跃状态，能正常执行网页的响应
- webView.onPause(); //当Acitivity被失去焦点被切换到后台不可见状态，需要执行onPause()，通过onPause()动作通知内核暂停所有的动作，比如DOM的解析、JavaScript执行等
- webView.pauseTimers(); // 当应用程序(存在webview)被切换到后台时，这个方法不仅仅针对当前的webview而是全局的全应用程序的webview,它会暂停所有webview的布局显示、解析、延时，从而降低CPU功耗
- webView.resumeTimers()； // 恢复pauseTimers状态
- rootLayout.removeView(webView); webView.destroy(); //销毁Webview，在关闭了Activity时，如果Webview的音乐或视频，还在播放，就必须销毁Webview。但是注意：webview调用destory时,webview仍绑定在Activity上，这是由于自定义webview构建时传入了该Activity的context对象，因此需要先从父容器中移除webview,然后再销毁webview
导航：
- webView.canGoBack(); // 网页是否可后退
- webView.canGoForword(); // 网页是否可前进
- webView.goBack(); // 网页后退
- webView.goForword(); // 网页前进
- webView.goBackOrForword( int step); //以当前的index为起始点前进或者后退到历史记录中指定的step，如果step为负数则为后退，正数则为前进
缓存：
- webview.clearCache(true); // 清除网页访问留下的缓存,由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序
- webview.clearHistory()；// 清除当前webview访问的历史记录,只会清除webview访问历史记录里的所有记录除了当前访问记录
2、WebSettings类：对WebView进行配置和管理
//声明WebSettings子类
WebSettings webSettings = webView.getSettings();
- webSettings.setJavaScriptEnabled(true); //如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
- webSettings.setPluginsEnabled(true); //支持插件
设置自适应屏幕，两者合用
- webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
- webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
缩放操作
- webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
- webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
- webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件
//其他细节操作
- webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
- LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
- LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
- LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
- LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据
- webSettings.setAllowFileAccess(true); //设置可以访问文件
- webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
- webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
- webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式
3、WebViewClient类：处理各种通知 & 请求事件
- shouldOverrideUrlLoading() //打开网页时，不调用系统浏览器进行打开，而是在本WebView中直接显示
- onPageStarted() //开始载入页面时调用此方法，在这里我们可以设定一个loading的页面，告诉用户程序正在等待网络响应
- onPageFinished() // 在页面加载结束时调用。我们可以关闭loading 条，切换程序动作
- onLoadResource() //在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次
- onReceivedError() // 加载页面的服务器出现错误时（如404）调用
- onReceivedSslError() // 处理https请求报错
- onScaleChanged() // 通知应用程序webview 要被scale。应用程序可以处理改事件，比如调整适配屏幕
4、WebChromeClient类：
辅助 WebView 处理 Javascript 的对话框,网站图标,网站标题等
- onProgressChanged() // 获得网页的加载进度并显示
- onReceivedTitle() // 获取Web页中的标题
- onJsAlert() // 拦截网页调用alert()函数
- onJsConfirm() // 拦截网页调用confirm()函数
- onJsPrompt() // 拦截网页调用prompt()函数
返回false，则仍旧执行alert || confirm || prompt
返回true，则代表接管浏览器的弹框，可以由安卓自定义行为，如果是confirm、prompt则需要对JsResult进行调用，从而通知浏览器Android这边的处理结果。
- onConsoleMessage() // 获取网页console信息ConsoleMessage
- onShowCustomView(View view, CustomViewCallback callback) // 通知主程序当前页面将要显示指定方向的View，该方法用来全屏播放视频
- onHideCustomView() // 与onShowCustomView对应，通知主程序当前页面将要关闭Custom View
-
onGeolocationPermissionsShowPrompt(String origin,GeolocationPermissions.Callback callback) //通知主程序web内容尝试使用定位API，但是没有相关的权限。主程序需要调用调用指定的定位权限申请的回调
-
onGeolocationPermissionsHidePrompt() // 通知程序有定位权限请求。如果onGeolocationPermissionsShowPrompt权限申请操作被取消，则隐藏相关的UI界面
-
onShowFileChooser(WebView webView, ValueCallback filePathCallback,FileChooserParams fileChooserParams) // 通知客户端显示文件选择器。用来处理file类型的HTML标签，响应用户点击选择文件的按钮操作。调用filePathCallback.onReceiveValue(null)并返回true取消请求操作。
5、如何避免WebView内存泄露
建议不要在xml布局文件中定义WebView控件，而是在需要的时候在Activity中直接创建，并且Context上下文推荐使用getApplicationContext.
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);// 获取WebView实例webView = new WebView(getApplicationContext());webView.setLayoutParams(params);mLayout.addView(webView);在Activity销毁（WebView）时，先让WebView加载null内容，然后移除WebView，再销毁WebView，最后把WebView设置为null
@Overrideprotected void onDestroy() { // 避免WebView内存泄露 if (webView != null) { webView.loadDataWithBaseURL(null, "", "text/html", "UTF-8", null); webView.clearHistory(); ((ViewGroup) webView.getParent()).removeView(webView); webView.destroy(); webView = null; } super.onDestroy();}6、webView中文件下载
/** * 当下载文件时打开系统自带的浏览器进行下载，当然也可以对捕获到的 url 进行处理在应用内下载。 **/
webView.setDownloadListener(new FileDownLoadListener());private class FileDownLoadListener implements DownloadListener { @Override public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) { Uri uri = Uri.parse(url); Intent intent = new Intent(Intent.ACTION_VIEW, uri); startActivity(intent); }}
7、往webview注入js
webView.getSettings().setJavaScriptEnabled(true);webView.addJavascriptInterface(new WebAppBridge(new WebAppBridge.OauthLoginImpl() { @Override public void getWebAuth(String result) { Toast.makeText(getApplicationContext(), "js通过webView调用原生方法", Toast.LENGTH_LONG).show(); webView.post(new Runnable() { @Override public void run() { // android主动调用web js方法 String username = "bird001"; String channel = "android"; webView.loadUrl("javascript:androidWebModule.logout('" + username + "','" + channel + "')"); } }); }}), "webAndroidModule");public class WebAppBridge { private OauthLoginImpl oauthLogin; public interface OauthLoginImpl { void getWebAuth(String result); } public WebAppBridge(OauthLoginImpl login) { this.oauthLogin = login; }// 必须添加此注解 @JavascriptInterface public void getAuth(String str) { if (this.oauthLogin != null) { oauthLogin.getWebAuth(str); } }}
8、Cookie管理
/** * 将cookie设置到 WebView * @param url 要加载的 url * @param cookie 要同步的 cookie */public static void syncCookie (String url, String cookie){ if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) { CookieSyncManager.createInstance(context); } CookieManager cookieManager = CookieManager.getInstance(); cookieManager.setAcceptCookie(true); /** * cookie 设置形式 * cookieManager.setCookie(url, "key=value;" + "domain=[your domain];path=/;") **/ cookieManager.setCookie(url, cookie);}/** * 移除cookie * 这个两个在 API level 21 被抛弃 * CookieManager.getInstance().removeSessionCookie(); * CookieManager.getInstance().removeAllCookie(); * 推荐使用这两个， level 21 新加的 * CookieManager.getInstance().removeSessionCookies(); * CookieManager.getInstance().removeAllCookies(); **/public static void removeCookies () { CookieManager cookieManager = CookieManager.getInstance(); cookieManager.removeAllCookie(); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { cookieManager.flush(); } else { CookieSyncManager.createInstance(Application.getInstance()); CookieSyncManager.getInstance().sync(); }}
9、Android5.0上 WebView中Http和Https混合问题
/** * MIXED_CONTENT_ALWAYS_ALLOW：允许从任何来源加载内容，即使起源是不安全的； * MIXED_CONTENT_NEVER_ALLOW：不允许Https加载Http的内容，即不允许从安全的起源去加载一个不安全的资源； * MIXED_CONTENT_COMPATIBILITY_MODE：当涉及到混合式内容时，WebView 会尝试去兼容最新Web浏览器的风格。 **/if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);} 10、文件上传、图片选择
H5代码：
// Android 5.0以下版本的文件选择回调protected ValueCallback mValueCallbackLow;// Android 5.0及以上版本的文件选择回调protected ValueCallback mValueCallbackHigh;// requestCodeprotected static final int REQUEST_CODE_FILE_PICKER = 51426;// 自定义WebChromeClientprivate class OpenFileChromeClient extends WebChromeClient { // Android 5.0以下版本选择文件时会触发，该方法为隐藏方法 public void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture) { showFileChooser(uploadMsg, null, false); } // Android 5.0 (API level 21)以上版本会触发该方法，该方法为公开方法 public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { final boolean allowMultiple = fileChooserParams.getMode() == FileChooserParams.MODE_OPEN_MULTIPLE;//是否支持多选 showFileChooser(null, filePathCallback, true); } return true; }}webView.setWebChromeClient(new OpenFileChromeClient()); /** * 打开选择图片/相机 */private void showFileChooser(final ValueCallback low, final ValueCallback high, final boolean allowMultiple) { //Android 5.0以下版本 if (mValueCallbackLow != null) { mValueCallbackLow.onReceiveValue(null); } mValueCallbackLow = low; //Android 5.0及以上版本 if (mValueCallbackHigh != null) { mValueCallbackHigh.onReceiveValue(null); } mValueCallbackHigh = high; // 相册&&文件 Intent intentPic = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI); // intentPic.setType(mUploadFileTypes); // 设置类型，不设置就会只打开相册 intentPic.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, allowMultiple); // 拍照 Intent iPhoto = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); mCameraFilePath = Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + System.currentTimeMillis() + ".png"; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) { // android7.0注意uri的获取方式改变 Uri photoOutputUri = FileProvider.getUriForFile( getApplicationContext(), BuildConfig.APPLICATION_ID + ".fileProvider", new File(mCameraFilePath)); iPhoto.putExtra(MediaStore.EXTRA_OUTPUT, photoOutputUri); } else { iPhoto.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(new File(mCameraFilePath))); } Intent chooser = new Intent(Intent.ACTION_CHOOSER); // ACTION_CHOOSER标题 chooser.putExtra(Intent.EXTRA_TITLE, "文件上传"); // 选项 chooser.putExtra(Intent.EXTRA_INTENT, intentPic); chooser.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Intent[]{iPhoto}); startActivityForResult(chooser, REQUEST_CODE_FILE_PICKER);} // 文件选择回调@Overrideprotected void onActivityResult(int requestCode, int resultCode, @Nullable Intent intent) { super.onActivityResult(requestCode, resultCode, intent); if (requestCode == REQUEST_CODE_FILE_PICKER && resultCode == RESULT_OK) { if (intent == null) { // 看是否从相机返回 File cameraFile = new File(mCameraFilePath); if (cameraFile.exists()) { Uri uri = Uri.fromFile(cameraFile); sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, uri)); responseWeb(new Uri[]{uri}); Log.d(TAG, "onActivityResult: 相机返回" + (mValueCallbackHigh == null)); return; } } else { Uri singleUri = intent.getData(); if (mValueCallbackLow != null) { // 5.0以下版本 mValueCallbackLow.onReceiveValue(singleUri == null ? null : singleUri); mValueCallbackLow = null; Log.d(TAG, "onActivityResult: 低版本返回处理"); } else if (mValueCallbackHigh != null) { // 5.0以上版本 if (singleUri != null) { // 单选 mValueCallbackHigh.onReceiveValue(new Uri[]{singleUri}); mValueCallbackHigh = null; Log.d(TAG, "onActivityResult: 高版本返回处理----》单选"); } else { // 多选 final int count = intent.getClipData().getItemCount(); Uri[] uris = new Uri[count]; for (int i = 0; i < count; i++) { uris[i] = intent.getClipData().getItemAt(i).getUri(); } mValueCallbackHigh.onReceiveValue(uris); mValueCallbackHigh = null; Log.d(TAG, "onActivityResult: 高版本返回处理----》多选"); } } } } else if (resultCode == Activity.RESULT_CANCELED) { cancelFilePick(); }}/** * 返回操作 * @param uris */public void responseWeb(Uri[] uris) { if (mValueCallbackHigh != null) { mValueCallbackHigh.onReceiveValue(uris); mValueCallbackHigh = null; } else if (mValueCallbackLow != null) { mValueCallbackLow.onReceiveValue(uris[0]); mValueCallbackLow = null; }}/** * 取消操作 */public void cancelFilePick() { //WebView对象，在用户取消文件选择器的情况下，需给onReceiveValue传null返回值 // 否则WebView在未收到返回值的情况下，无法进行任何操作，文件选择器会失效 if (mValueCallbackLow != null) { mValueCallbackLow.onReceiveValue(null); mValueCallbackLow = null; } else if (mValueCallbackHigh != null) { mValueCallbackHigh.onReceiveValue(null); mValueCallbackHigh = null; }}
11、H5 video全屏播放
核心思路：h5播放器点击全屏播放会触发onShowCustomView，取消全屏播放会触发onHideCustomView。
全屏时，使用一个FrameLayout将之前的webView覆盖掉。取消全屏则将FrameLayout隐藏而重新webView。并且需要在切换屏幕方向时隐藏——显示titleBar
private void fullScreen() { if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) { setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); Log.i(TAG, "横屏"); } else { setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); Log.i(TAG, "竖屏"); }}@Overridepublic void onShowCustomView(View view, CustomViewCallback callback) { if (view instanceof FrameLayout && fullScreenView != null) { // A video wants to be shown this.videoViewContainer = (FrameLayout) view; this.videoViewCallback = callback; fullScreenView.addView(videoViewContainer, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); fullScreenView.setVisibility(View.VISIBLE); isVideoFullscreen = true; }}@Overridepublic void onHideCustomView() { if (isVideoFullscreen && fullScreenView != null) { // Hide the video view, remove it, and show the non-video view fullScreenView.setVisibility(View.INVISIBLE); fullScreenView.removeView(videoViewContainer); // Call back (only in API level <19, because in API level 19+ with chromium webview it crashes) if (videoViewCallback != null && !videoViewCallback.getClass().getName().contains(".chromium.")) { videoViewCallback.onCustomViewHidden(); } isVideoFullscreen = false; videoViewContainer = null; videoViewCallback = null; }}12、webview缓存
- 页面缓存：加载一个网页时的html、JS、CSS等页面或者资源数据，这些缓存资源是由于浏览器 的行为而产生，开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地影响到这些缓存数据。 而缓存的索引放在：/data/data/<包名>/databases 对应的文件放在：/data/data/package_name/cache/webviewCacheChromunm下
- 数据缓存：分为AppCache和DOM Storage两种 我们开发者可以自行控制的就是这些缓存资源，
- AppCache：我们能够有选择的缓冲web浏览器中所有的东西，从页面、图片到脚本、css等等。 尤其在涉及到应用于网站的多个页面上的CSS和JavaScript文件的时候非常有用。其大小目前通常是5M。 在Android上需要手动开启（setAppCacheEnabled），并设置路径（setAppCachePath）和容量 （setAppCacheMaxSize），而Android中使用ApplicationCache.db来保存AppCache数据！
- DOM Storage：存储一些简单的用key/value对即可解决的数据，根据作用范围的不同，有Session Storage和Local Storage两种，分别用于会话级别的存储（页面关闭即消失）和本地化存储（除非主动 删除，否则数据永远不会过期）在Android中可以手动开启DOM Storage（setDomStorageEnabled）， 设置存储路径（setDatabasePath）Android中Webkit会为DOMStorage产生两个文件（my_path/localstorage/http_blog.csdn.net_0.localstorage和my_path/Databases.db）
更多相关文章
- 解决 Android(安卓)Studio：Failed to resolve: com.android.suppo
- Android(安卓)缓存管理和LRU 算法
- 从android角度看2D加速图形引擎
- cocos2dx在windows下开发，编译到android上（1）
- 关于android中的内部存储与外部存储
- 对 android apk 进行重新签名操作
- android MK文件简介
- Android(安卓)NDK开发详细介绍
- android 资源文件String字符串拼接