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提供下面三个方法来加载页面：

loadUrl(String url)：通过url加载页面
loadData (String data, String mimeType, String encoding) ：通过解析html格式的字符串显示相应的页面
- data：html语法字符串
- mimeType：资源的媒体类型，加载页面通常设置为 “text/html”
- encoding：编码
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资源的方式是一种特例