WebView详解

2016年10月10日 最近在做项目时，用到了WebView这个控件，因为之前对WebView并没有什么深入的了解，一直以为这个控件功能很简单，实现主要在web端。但是今天正式用到这个控件时，才发现我对这个控件的了解真的很浅薄，所以特别在这里进行一些记录。

什么是WebView？

WebView是用来显示web page的一个View组件，这个类，是调用浏览器或者在Activity中显示在网页的基础。 WebView采用了Webkit浏览器内核（一种开源浏览器引擎），并且具有导航（后退前进浏览的网页）、缩放网页、执行文本搜索等功能。看起来webView还是蛮强大的。

WebView的基本用法

使用WebView的基础操作就不在这里介绍了，直接引入控件，findViewById即可，不要忘记加网络权限。

基本用法

Google webView只用来展示一些html作为你的UI界面的一部分，给用户阅读，它能用来和用户进行交互。如果需要一个全面的browser，那你应该使用intent启动一个外部浏览器。例如：

 Uri uri = Uri.parse("http://www.example.com");
 Intent intent = new Intent(Intent.ACTION_VIEW, uri);
 startActivity(intent);

加载一个url

 webview.loadUrl("http://slashdot.org/");

加载一个HTML字符串

String summary = "<html><body>You scored <b>192</b> points.</body></html>";
 webview.loadData(summary, "text/html", null);

loadData() and loadDataWithBaseUrl()的区别

在使用loadData加载一串html代码时，我发现总是出现编码异常的问题，无论我怎么更改编码,而换作loadDataWithBaseUrl这种问题就消失了这是因为loadData()中的html 代码中不能包含'#', '%', '', '?'四中特殊字符，这就为我们内嵌css样式等制造了麻烦，因为css中经常用'#', '%'等字符所以在使用loadData()加载一串html代码时，需要先将这些特殊字符进行转换，好吧真的很麻烦。

参数不同： loadDataWithBaseURL()比loadData()多个参数 baseUrl String: 指定HTML代码片段中相关资源的相对根路径,null代表'about:blank' historyUrl:指定历史URL,null代表'about:blank',如果非null，这个url则必须有效

自定义行为

WebView有几个可以自定义的Behavior，如下：

创建和设置 WebChromeClient 的子类。作用：进行一些可能影响浏览器的界面的变化的操作，比如加载的进度，js的alert()，web title、icon
创建和设置 WebViewClient的子类。作用：负责处理各种通知、请求事件
修改 WebSettings，比如 setJavaScriptEnabled()
注入java object到js环境中，通过 addJavascriptOmterface（Object，String）方法。使他们通过js中页面访问

Zoom缩放

使用WebSettings.setBuiltInZoomControls(boolean)方法启用或者关闭内部缩放机制注意:如果webView的width or height设置为warp_content，那会导致缩放时出现一些不确定的情况，所以google建议使用webView时，却定它的宽和高

Cookies和webView多窗口管理

google建议：出于安全，app应该有自己的cookies管理，此处对cookies不再讨论多窗口管理可以通过自定义WebChromeClient 其他问题：当设备出现方向改变，配置发生改变，Activity将会被recreated or destory，这会导致WebView重新加载页面。处理这种情况需要这个链接：

下面让是常见的方法：

WebSettings

 	// 1. WebSettings: 获取webView设置
        WebSettings settings = webView.getSettings();
        // 启用js
        settings.setJavaScriptEnabled(true);

        // **********************************缩放功能

        /**
         * 是否使用wide viewport
         * 什么是viewport？
         * 需要一定的web基础，查了以下百度首页的源码发现
         * <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
         * 再配合度娘理解，就是一种为了适配移动屏幕的一种meta标签，与移动设备的像素有关(注意这句话：width=device-width)
         * TODO API不太明白，wide viewport也不太明白：待处理
         * 该方法用来开启或者关闭双击查看网页缩略图的功能
         */
        settings.setUseWideViewPort(true);

	// webView  是否支持缩放
        settings.setSupportZoom(true);

        // 是否启用放大缩小按钮
        settings.setBuiltInZoomControls(false);

        // 是否显示放大缩小按钮
        settings.setDisplayZoomControls(true);

        //************************************字体功能

        // 设置默认物理字体大小
        settings.setDefaultFontSize(15);

        // 设置默认逻辑字体大小
        settings.setDefaultFixedFontSize(15);

        // 设置物理最小字体，默认为8
        settings.setMinimumFontSize(12);

        // 设置逻辑最小字体，默认为8
        settings.setMinimumLogicalFontSize(12);

        // 设置默认字体编码
        settings.setDefaultTextEncodingName("UTF-8");

        // TODO html的物理字体和逻辑字体我也分不清楚：待处理

        // 设置字体缩放,参数为百分比，当为200时，字体大小为原来的两倍，最小字体为setMinimumFontSize的值
        // Api14代替了方法：void setTextSize (WebSettings.TextSize)
        // （API14之前要使用setTextSize方法）
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
            settings.setTextZoom(100);
        }

###WebChromeClient

	// 2. WebChromeClient
        final Activity activity = this;
        webView.setWebChromeClient(new WebChromeClient() {

            @Override
            // 接收 web page 加载进度，并做出处理
            public void onProgressChanged(WebView view, int progress) {
//                Log.i("logi", "progress" + progress);
                activity.setProgress(progress * 100);
            }

            @Override
            // 接收web page title 并做出处理
            public void onReceivedTitle(WebView view, String title) {
                tvTitle.setText(title);
            }

            @Override
            // 接受web page icon 并做出处理
            public void onReceivedIcon(WebView view, Bitmap icon) {
                if (icon != null) {
                    ivIcon.setImageBitmap(icon);
                } else {
                    Log.i("logi", "icon is null");
                }
            }
        });

###WebViewClient

	// 3. WebViewClient,給webView一個客戶端，這個客戶端用來處理和加載url
	// 如果不给webView设置WebViewClient，则webview并没有办法处理url，所以会调用外部浏览器，只要指定了一个WebViewClient，就会在webView内部打开链接
        webView.setWebViewClient(new WebViewClient() {

            @Override
            // 当webView要加载一个新的url时

            // 如果该方法返回true，则代表host application（即我们的应用程序）将会处理这个url，
            // 意思就是我们可以通过在shouldOverrideUrlLoading写自己的代码来对这个url进行操作，
            // 可以使用webView.loadUrl来在内部打开url，也可以使用intent调用浏览器来打开这个url

            // 如果返回false，则代表这个url全权交给webView的webViewClient操作，此时，shouldOverrideUrlLoading不应该有其他的代码
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
//                Log.i("logi", "shouldOverrideUrlLoading:" + url);
//                Uri uri = Uri.parse(url);
//                Intent intent = new Intent(Intent.ACTION_VIEW, uri);
//                startActivity(intent);
//                webView.loadUrl(url);
                return false;
            }

            @Override // 通知host application(宿主应用程序，这里指我们的项目) 開始加載一個page
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                Log.i("logi", "開始加載:" + url);
                // 加載之前，判斷網頁是否需要加載圖片，如果不需要，要對獲取的html代碼進行一些處理

            }

            @Override // 通知host application page已經加載完成
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                Log.i("logi", "加載結束:" + url);
            }

            @Override // 接收错误码
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(activity, "Oh no! " + description, Toast.LENGTH_SHORT).show();
//                1. 第一种方法，加载一个html提示页面,个人推荐
                webView.loadUrl("file:///android_asset/error.html");
//                2. 第二种方法，隐藏web view 显示一个新的布局
//                webView.setVisibility(View.GONE);
//                tvError.setVisibility(View.VISIBLE);
            }
        });

下载监听

        // 4. WebView下载监听
        webView.setDownloadListener(new DownloadListener() {
            /**
             * @param url 完整的下载地址(也可能是html文档)
             * @param userAgent 用于下载的用户代理
             * @param contentDisposition http header的contentDisposition
             * @param mimetype MIME类型
             * @param contentLength 由服务器所报告的文件的大小
             */
            @Override
            public void onDownloadStart(String url, String userAgent, String contentDisposition, String mimetype, long contentLength) {

                Toast.makeText(MainActivity.this, "开始下载", Toast.LENGTH_SHORT).show();
//                ACTION_VIEW根据数据类型打开相应的Activity，此处会调用手机浏览器下载
//                Uri uri = Uri.parse(url);
//                Intent intent = new Intent(Intent.ACTION_VIEW, uri);
//                startActivity(intent);

                // 调用系统下载器下载
                DownloadManager downloadManager = (DownloadManager) MainActivity.this.getSystemService(DOWNLOAD_SERVICE);
                Uri uri = Uri.parse(url);
                DownloadManager.Request request = new DownloadManager.Request(uri);
                long download_id = downloadManager.enqueue(request);
                Log.i("logi", "download_id" + download_id);
                // 这个id用来区分下载任务，在我测试的华为手机上同样也是下载次数
            }
        });

和JS进行交互

在assert文件夹下新建一个js.html：

<!DOCTYPE html>
<html>
<head>

    <title>js和java交互</title>
    <script type="text/javascript">
	function fun1(){
		alert("java 调用 js代码成功！！！");
	}

        //调用Android的方法，这个Android是接口的name
	function showAndroidToast(toast) {
            Android.showToast(toast); // 调用这个接口的showToast方法
        }
	</script>
</head>
<body>
    <p>这里本来没有内容</p>
    <input type="button" value="调用Android的方法"
           onClick="showAndroidToast('js调用了android的代码！success！！！')" />
</body>
</html>

Java调用JS的方法： 其实调用非常简单，如果你有很深的js功底，完全可以用js写一个android app。先使用webView.loadUrl("file:///android_asset/js.html");加载这个html文档，然后再使用 webView.loadUrl("javascript:fun1()");方法即可调用js.html中fun1()方法。

JS调用Java方法： 同样也很简单，

先自定义一个接口JavaScriptObject:

public class JavaScriptObject {
    Context mContext;

    /** Instantiate the interface and set the context */
    JavaScriptObject(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface // 指定这是js接口
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

使用webView.addJavascriptInterface(new JavaScriptObject(this), "Android");方法将这个接口添加给webView，并指定名称为Android
当指定完成后，Js就可以在它的代码片段中通过这个Android接口调用他的方法了，这里是显示一个Toast

function showAndroidToast(toast) {
	Android.showToast(toast); // 调用这个接口的showToast方法
}

这样html button被点击时，则会调用android的Toast

上一页工具类下一页ViewTreeObserver类监听ViewTree

最后更新于2年前

这有帮助吗？