Days31 WebView

1、介绍：
Android提供了一个内置浏览器，该浏览器可以查看网站，查看邮件，播放视频。要使用该内置浏览器，要通过WebView组件实现。webView组件式专门用来浏览网页的。
类结构：
java.lang.Object
↳ android.view.View
↳ android.view.ViewGroup
↳ android.widget.AbsoluteLayout
↳ android.webkit.WebView
2、常用方法：
loadUrl() 加载网址，要确定网址是否准确，且需要网络权限
loadData()不推荐使用
loadDataWithBaseURL()推荐使用 WebView 加载指定的data数据（html代码）
/**
* 第二个参数：String data 字符串String形式的数据
* 第三个参数：String mimeType data数据的MIME类型， e.g. ‘text/html’
* 第四个参数：String encoding data数据的编码格式
*/
goBack() 后退（如可后退）
goForward() 前进 （如可前进）
stopLoading() 停止加载
reload() 重新加载
3、两个类：
WebViewClient
WebView在加载页面时需要一个WebViewClient对象，用来监听网络开始加载和结束，如果不设置客户端，会调用系统的浏览器加载网页
WebViewClient主要帮助WebView处理各种通知、请求事件的
方法：
onPageStarted 当页面开始加载时调用
onPageFinished当页面加载完成时调用
WebChromeClient
WebChromeClient主要辅助WebView处理JavaScript的对话框、网站图标、网站title、加载进度等,支持运行特殊的javascript（例如：alert()）
方法：
onProgressChanged当网页加载进度改变时调用
onReceivedTitle当获得网页标题时调用
代码：
WebViewClient：

public class MyWebViewClient extends WebViewClient {

    public interface ClientCallBack{
        void onStart(String url);
        void onFinish(String url);
    }

    private ClientCallBack clientCallBack = null;

    public void setClientCallBack(ClientCallBack clientCallBack){
        this.clientCallBack = clientCallBack;
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);

        if(clientCallBack != null){
            clientCallBack.onStart(url);
        }
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);

        if(clientCallBack != null){
            clientCallBack.onFinish(url);
        }
    }
}

WebChromeClient：

public class MyChromClient extends WebChromeClient {

    public interface ChromCallBack{
        void onProgressChanged(int progress);
        void onReceivedTitle(String title);
    }

    private ChromCallBack chromCallBack = null;

    public void setChromCallBack(ChromCallBack chromCallBack){
        this.chromCallBack = chromCallBack;
    }

    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        super.onProgressChanged(view, newProgress);
        if(chromCallBack != null){
            chromCallBack.onProgressChanged(newProgress);
        }
    }

    @Override
    public void onReceivedTitle(WebView view, String title) {
        super.onReceivedTitle(view, title);
        if(chromCallBack != null){
            chromCallBack.onReceivedTitle(title);
        }
    }
}

4、让WebView支持javascript的步骤：
（1）使用 WebView 组件的WebSettings对象的setJavaScriptEnabled()方法。这种做法是让 WebView 能支持绝大多数的javascript语言。但是依然不支持alert等警告对话框语句。
（2）使用 WebView 组件的setWebChromeClient()方法。这种做法是让 WebView 也支持显示alert等警告对话框。
5、当网页需要和App进行交互时，可以注入Java对象提供给JavaScritp调用. Java对象提供相应的方法供js使用.
第一个参数为绑定到JavaScript的类实例
第二个参数必须对应javascript中实例的名称

function showToast(msg){
      Android.showToast(msg);
 }

wvJS.addJavascriptInterface(obj, "Android");

备注：
1、assets应该在main目录下，而不是main/java
若从资产包下读取文件格式：file:///android_asset/文件名
2、 如果这个方法是用来与javascript交互的方法，必须添加@JavaScriptInterface注解
3、
testHtml.innerHTML = “abc“;//以html形式展示
testHtml2.innerText = “def“;//以文本形式展示
4、TextUtils.isEmpty(title) 返回值为boolean型，判定title是否为null
案例一：
WebView查看网站，并可以在加载网页时显示ProgressBar，加载完成后取消显示ProgressBar，并可以通过ProgressBar查看加载网页的进度；四个按钮可以控制网页的重新加载、停止加载、后退（当可后退），前进（当可前进）

public class BaseActivity extends AppCompatActivity {
    private ProgressBar pbProgress = null;
    private WebView wvBase = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_base);

        initView();

        initData();
    }

    private void initData() {
//        加载网址，要确定网址是否准确，且需要网络权限
        wvBase.loadUrl("http://www.baidu.com/");

//        WebView在加载页面时需要一个WebViewClient对象，用来监听网络开始加载和结束，如果不设置客户端，会调用系统的浏览器加载网页
//        WebViewClient主要帮助WebView处理各种通知、请求事件的
        MyWebViewClient myWebViewClient = new MyWebViewClient();
        myWebViewClient.setClientCallBack(new MyWebViewClient.ClientCallBack() {
            @Override
            public void onStart(String url) {
            //可见
                pbProgress.setVisibility(View.VISIBLE);
            }

            @Override
            public void onFinish(String url) {
            //隐藏    不可见为：invisible
                pbProgress.setVisibility(View.GONE);
            }
        });

//        WebChromeClient主要辅助WebView处理JavaScript的对话框、网站图标、网站title、加载进度等
        MyChromClient myChromClient = new MyChromClient();
        myChromClient.setChromCallBack(new MyChromClient.ChromCallBack() {
            @Override
            public void onProgressChanged(int progress) {
                pbProgress.setProgress(progress);
            }

            @Override
            public void onReceivedTitle(String title) {
//                如果title不为null
                if(!TextUtils.isEmpty(title)){
                    setTitle(title);
                }
            }
        });

        wvBase.setWebViewClient(myWebViewClient);

        wvBase.setWebChromeClient(myChromClient);
    }

    private void initView() {
        pbProgress = (ProgressBar) findViewById(R.id.pbProgress);
        wvBase = (WebView) findViewById(R.id.wvBase);
    }

    public void click4(View view) {
        switch (view.getId()){
            case R.id.btnRefresh:
                wvBase.reload();
                break;
            case R.id.btnStop:
                wvBase.stopLoading();
                break;
            case R.id.btnGo:
                if(wvBase.canGoForward()){
                    wvBase.goForward();
                }
                break;
            case R.id.btnBack:
                if(wvBase.canGoBack()){
                    wvBase.goBack();
                }
                break;
        }
    }

//    当按后退键时
    @Override
    public void onBackPressed() {
        if(wvBase.canGoBack()){
            wvBase.goBack();
        }else{
            super.onBackPressed();
        }
    }
}

案例二：
WebView加载指定的data

public class JsonActivity extends AppCompatActivity {

    private WebView wvJson = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_json);

        wvJson = (WebView) findViewById(R.id.wvJson);

        wvJson.setWebViewClient(new MyWebViewClient());
        wvJson.setWebChromeClient(new MyChromClient());

//        WebView 加载指定的data数据（html代码）
        /**
         * 第二个参数：String data 字符串String形式的数据
         * 第三个参数：String mimeType data数据的MIME类型， e.g. 'text/html'
         * 第四个参数：String encoding data数据的编码格式
         */
        wvJson.loadDataWithBaseURL(null, JsonString.CONTENT,"text/html","utf-8",null);
    }
}

案例三：
WebView加载资产目录下的资产文件

public class LocalActivity extends AppCompatActivity {

    private WebView wvLoacl = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_local);

        wvLoacl = (WebView) findViewById(R.id.wvLocal);

        wvLoacl.setWebViewClient(new MyWebViewClient());
        wvLoacl.setWebChromeClient(new MyChromClient());

//        assets应该在main目录下，而不是main/java
//        若从资产包下读取文件格式：file:///android_asset/文件名
        wvLoacl.loadUrl("file:///android_asset/demo.html");
    }
}

案例四：
activity：

public class JSActivity extends AppCompatActivity {

    private WebView wvJS = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_js);

        wvJS = (WebView) findViewById(R.id.wvJS);

        wvJS.setWebViewClient(new MyWebViewClient());
        wvJS.setWebChromeClient(new WebChromeClient());

        WebSettings settings = wvJS.getSettings();
//      支持运行javascript
        settings.setJavaScriptEnabled(true);

        wvJS.loadUrl("file:///android_asset/demo2.html");

        JSActionObject obj = new JSActionObject(this);

//        第一个参数为绑定到JavaScript的类实例
//        第二个参数必须对应javascript中实例的名称
/**
 *  JavaScript代码
 *  function showToast(msg){
 *      Android.showToast(msg);
 *  }
 */
        wvJS.addJavascriptInterface(obj, "Android");
    }

    public void click5(View view) {
//       会执行JavaScript中的function showToast,后会通过与Javascript绑定的类的名为“Android”实例调用此实例的方法
        wvJS.loadUrl("javascript:showToast('this is from android.')");
    }
}

与javascipt绑定的类：

public class JSActionObject {
    private Context context = null;
    public JSActionObject(Context context){
        this.context = context;
    }

//    如果这个方法是用来与javascript交互的方法，必须添加@JavaScriptInterface注解
    @JavascriptInterface
    public void showToast(String msg){
        Toast.makeText(context,msg,Toast.LENGTH_LONG).show();
    }

}