WebView：Android-H5交互

其他 2020-08-15 10:38:11 阅读次数: 0

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

@Override
protected 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代码：<input type="file" id="input_picker_img" οnchange="pickerImg(this)" />

// Android 5.0以下版本的文件选择回调
protected ValueCallback<Uri> mValueCallbackLow;
// Android 5.0及以上版本的文件选择回调
protected ValueCallback<Uri[]> mValueCallbackHigh;
// requestCode
protected static final int REQUEST_CODE_FILE_PICKER = 51426;

// 自定义WebChromeClient
private class OpenFileChromeClient extends WebChromeClient {
    // Android 5.0以下版本选择文件时会触发，该方法为隐藏方法
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
        showFileChooser(uploadMsg, null, false);
    }

    // Android 5.0 (API level 21)以上版本会触发该方法，该方法为公开方法
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> 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<Uri> low, final ValueCallback<Uri[]> 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);
}
// 文件选择回调
@Override
protected 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, "竖屏");
    }
}
@Override
public 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;
    }
}

@Override
public 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）

猜你喜欢

转载自blog.csdn.net/qq_40913065/article/details/107997698
今日推荐
周排行
Java基础系列-Java11特性解读
前端面试查漏补缺--(十一) 前端软件架构模式MVC/MVP/MVVM
java Listener监听器
矩阵的迹
运用MVP实现二级联动
019基于JSP的学生考勤管理系统(MySQL版)
一道逻辑题 - 我拿走了哪个数
C# 通用单例窗体类
分布式之消息队列复习精讲【转】
Mac 使用.bash_profile
每日归档
更多
2024-07-11(0)
2024-07-10(0)
2024-07-09(0)
2024-07-08(0)
2024-07-07(0)
2024-07-06(0)
2024-07-05(0)
2024-07-04(0)
2024-07-03(0)
2024-07-02(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022