WebView的使用笔记（一）

一、概述

 WebView，几乎是每个开发环境都具备的，WP的webbrowser，Android和IOS的WebView。
 WebView是android中用来显示页面的视图控件，它的功能相当强大，通过它可以加载显示网页，并具备一般浏览器所具有的功能，具有高度可定制性，因此WebView控件也用来开发浏览器，同时也是android中js与java互调的桥梁，有了这个控件，web前端人员也可以通过js，css3，h5写android UI界面。

webView的使用是建立在网络上的，使用必须添加网络权限：

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

二、加载本地和远程的html页面

WebView提供下面三个方法来加载页面：

1. loadUrl(String url)：通过url加载页面
2. loadData (String data, String mimeType, String encoding) ：通过解析html格式的字符串显示相应的页面
   
   • data：html语法字符串
   • mimeType：资源的媒体类型，加载页面通常设置为 “text/html”
   • encoding：编码
3. loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl) ：
   
   • baseUrl：基本的url
   • data：html字符串
   • mimeType：资源的媒体类型，加载页面通常设置为 “text/html”
   • encoding：编码
   • historyUrl：历史url

关于loadData()和loadDataWithBaseURL的区别，网上说：

• loadData()中的html data中不能包含’#’, ‘%’, ‘\’, ‘?’四中特殊字符，出现这种字符就会出现解析错误，显示找不到网页还有部分html代码。需要如何处理呢？我们需要用UrlEncoder编码为%23, %25, %27, %3f ,或者使用loadDataWithBaseURL加载页面。

加载本地页面示例：

• 加载本地asset下面的html页面（通常我们自己写的html页面都放到这个目录下）：

webView.loadUrl("file:///android_asset/html/main.html");

• 加载远程页面

webView.loadUrl("http://www.baidu.com");

• 加载html字符串（用html的标签语法写字符串，可以被解析成html显示）

String html = "<font size='6' color='red'>我是html格式的字符串，可以被WebView解析</font>";
webView.loadData(html,"text/html","UTF-8");

 也可以通过loadDataWithBaseURL()

String html = "<font size='6' color='red'>我是html格式的字符串，可以被WebView解析</font>";
webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null);

三、浏览器操作，控制WebView

浏览器常见的操作如：前进，后退，缩小，放大，清空历史：

• 前进：webView.getForward();
• 后退：webView.getBack();
• 缩小：webView.zoomOut();
• 放大：webView.zoomIn();
• 清空历史记录：webView.clearHistory();

注意： 前进和后退的前提是可以前进和后退，即：

• 如果有上一个浏览的历史，那么可以后退
• 如果有下一个前进的历史（之前在这里回退了），那么可以前进

 可以通过webView.canGoBack()和webView.canGoForward()分别判断一下是否可以后退和前进

四、java与js交互

必须打开js支持：

// 开启js支持
settings.setJavaScriptEnabled(true);

• java调用js代码，通过webView.loadUrl(“javascript：jsMethod”):

如：

webView.loadUrl("javascript:test('调用js成功!')");

• js调用java代码，通过webView. addJavascriptInterface (Object object, String name) ：
  
  • object：要暴露给js调用的java类
  • name：暴露的java对象在js中的名称

如：

webView.addJavascriptInterface(new ToastInterface(this), "android");

暴露的对象：ToastInterface.java

package com.example.webviewtest;

import android.content.Context;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

/**
 * 暴露的方法上门必须有@JavascriptInterface注释
 * 不然js无法调用该方法
 * @author lt
 *
 */
public class ToastInterface {

    private Context context;

    public ToastInterface(Context context){
        this.context = context;
    }

     /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String content){
        Toast.makeText(context, content, 0).show();
    }
}

 注意类上面的注释

js调用暴露对象：

方式一:  <input type="button" value="显示土司" onclick="javascript:android.showToast('方式一：调用android代码成功!')" />

方式二:  <input type="button" value="显示土司" onclick="window.android.showToast('方式二：调用android代码成功!')" />

方式三:  <input type="button" value="显示土司" onclick="showToast('方式三：调用android代码成功!')" />

 其中：showToast()

function showToast(toast){
    //window.android.showToast(toast);
    javascript:android.showToast(toast);
}

注意：window和javascript:是可以省略的包括直接写在onclick事件中的，android就是暴露对象在js中的名称。

• js的三种弹窗在替换成android中的对话框
  可以通过给WebView设置WebChromeClient对象重写相应的事件实现我们自己处理相应的js弹窗，如果没自己处理，系统默认替换成相应的对话框

如：

webView.setWebChromeClient(new WebChromeClient(){

            /**
             * 响应js的alert对话框
             * @param url : 当前页面的url地址
             * @param message 显示提示输入框的信息.
             * @parm result : js窗口响应的结果，通过它可以实现js窗口的确认和取消操作
             */
            @Override
            public boolean onJsAlert(WebView view, String url, String message,
                    final JsResult result) {
                Dialog dialog = new AlertDialog.Builder(MainActivity.this)
                .setIcon(R.drawable.ic_launcher)
                .setTitle("温馨提示")
                .setMessage(message)
                .setPositiveButton("确定", new OnClickListener() {

                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(MainActivity.this, "关闭对话框", 0).show();
                        result.cancel(); // 关闭对话框
                    }
                })
                .create();
                dialog.show();
                return true;
            }

            /**
             * 输入对话框
             * @url 当前页面的url地址
             * @param message 显示提示输入框的信息.
             * @param defaultValue js的prompt输入对话框的默认显示的文本
             * @parm result : js窗口响应的结果，通过它可以实现js窗口的确认和取消操作
             */
            @Override
            public boolean onJsPrompt(WebView view, String url, String message,
                    String defaultValue, JsPromptResult result) {
                return super.onJsPrompt(view, url, message, defaultValue, result);
            }


            /**
             * 响应js的confirm对话框
             * @param url : 当前页面的url地址
             * @param message 显示提示输入框的信息.
             * @parm result : js窗口响应的结果，通过它可以实现js窗口的确认和取消操作
             */
            @Override
            public boolean onJsConfirm(WebView view, String url,
                    String message, final JsResult result) {
                Dialog dialog  = new AlertDialog.Builder(MainActivity.this)
                .setIcon(R.drawable.ic_launcher)
                .setTitle("确定要删除?")
                .setPositiveButton("确定", new OnClickListener() {

                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(MainActivity.this, "删除成功!", 0).show();
                        result.confirm(); 
                    }
                })
                .setNegativeButton("取消", new OnClickListener() {

                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.cancel();
                    }
                })
                .setMessage(message)
                .create();
                dialog.show();
                return true;
            }

            /**
             * @param: title WebView加载页面的<title></title>标签的值
             */
            @Override
            public void onReceivedTitle(WebView view, String title) {
                MainActivity.this.setTitle(title);
                super.onReceivedTitle(view, title);
            }

        });

注意：

• 上面我们自己重写了相应的方法后，js弹出的窗口就是我们自己设置的了

• 注释说明

• onReceivedTitle()的title是html头部的title标签的值，及html页面的标题，默认情况下系统会将WebView加载的html页面的标题替换成我们Activity的标题。

五、切换显示的页面

 如果我们不做任何的处理，那么在html页面执行了加载url页面的时候，系统会打开浏览器访问url地址，而我们可以通过下面的代码实现就用当前的webView来加载要打开的网页：

webView.setWebViewClient(new WebViewClient() {
            //当点击链接时,希望覆盖而不是打开新窗口
            @Override
            public boolean shouldOverrideUrlLoading(WebView webView, String url) {
                webView.loadUrl(url);  //加载新的url
                return true;    //返回true,代表事件已处理,事件流到此终止
            }
        });

 给webView设置WebViewClient,并重写WebViewClient的shouldOverrideUrlLoading来自己拦截打开url地址的请求，实现用当前的webView加载url。

六、加载资源

 如果我们要在html的页面加载asset目录下的一张图片，那么图片的路径可以是绝对路径和相对路径：

绝对路径，比如：

file:///android_asset/images/test.jpg

相当路径，比如：

../images/test.jpg

images和html为同一级目录，..表示上一级目录

注意：因为我们的项目是打包成apk（也是一种压缩格式的）形式运行在手机或者模拟器上的，所以asset目录下面的资源除了webView这个控件，其他的不能直接以这种方式引用资源。WebView的这种使用asset资源的方式是一种特例