WebView之简识

来源:互联网 发布:浙江大学软件学院就业 编辑:程序博客网 时间:2024/05/20 20:48

一 前言

       Android 提供WebView组件,表面上来看,这个组件和普通View的差不多,但是实现上这个组件的功能要强大的多,WebVIew组件本身就是一个浏览器实现,它的内核基于开源的WebKit引擎。如果对WebView进行美化、包装就可以开发出自己的浏览器。Android 提供WebSetting类,可以对WebView进行设置,我们还可以自定义类继承WebViewClient、WebChromeClient,对页面加载过程进行监听。

二 属性与方法

WebView常用方法:

void goBack() 后退

void goForward 前进

void loadUrl(String url)加载指定URL对应的网页

void zoomIn() 放大网页

void zoomOut()缩小网页

WebSettings常用方法:

setAllowFileAccess 启用或禁止WebView访问文件数据

setBlockNetworkImage 是否显示网络图像

setBuiltInZoomControls 设置是否支持缩放

setCacheMode 设置缓冲的模式

setDefaultFontSize 设置默认的字体大小

setDefaultTextEncodingName 设置在解码时使用的默认编码

setFixedFontFamily 设置固定使用的字体

setJavaSciptEnabled 设置是否支持Javascript

setLayoutAlgorithm 设置布局方式

setLightTouchEnabled 设置用鼠标激活被选项

setSupportZoom 设置是否支持变焦

WebViewClient常用方法:

doUpdate VisitedHistory 更新历史记录

onFormResubmission 应用程序重新请求网页数据

onLoadResource 加载指定地址提供的资源

onPageFinished 网页加载完毕

onPageStarted 网页开始加载

onReceivedError 报告错误信息

onScaleChanged WebView发生改变

shouldOverrideUrlLoading 控制新的连接在当前WebView中打开

WebChromeClient常用方法:

onCloseWindow 关闭WebView

onCreateWindow 创建WebView

onJsAlert 处理Javascript中的Alert对话框

onJsConfirm处理Javascript中的Confirm对话框

onJsPrompt处理Javascript中的Prompt对话框

onProgressChanged 加载进度条改变

onReceivedlcon 网页图标更改

onReceivedTitle 网页Title更改

onRequestFocus WebView显示焦点

三 加载普通页面

布局文件:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <WebView        android:id="@+id/webview"        android:layout_width="fill_parent"        android:layout_height="fill_parent"/></LinearLayout>

主界面:
@EActivity(R.layout.activity_webview_test)public class WebViewTestActivity extends Activity{    @ViewById(R.id.webview)    WebView webView;    @AfterViews    void initData(){        //设置WebView属性,能够执行JavaScript脚本        webView.getSettings().setJavaScriptEnabled(true);        //加载URL内容        webView.loadUrl("http://www.baidu.com");        //设置web视图客户端        webView.setWebViewClient(new MyWebViewClient());    }}
说明,从上述代码可以看出webView通过loadUrl(String url)添加、显示页面,当然还可以设置回退:
 //设置回退    @Override    public boolean onKeyDown(int keyCode,KeyEvent event) {        if((keyCode==KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {            webView.goBack();            return true;        }        return super.onKeyDown(keyCode,event);    }
MYWebViewClient代码如下:
public class MyWebViewClient extends WebViewClient {    /**     * 新开页面时用自己定义的webview来显示,不用系统自带的浏览器来显示     * @param view     * @param url     * @return     */    public boolean shouldOverviewUrlLoading(WebView view, String url) {        view.loadUrl(url);        return true;    }    /**     * // 开始加载网页时要做的工作     * @param view     * @param url     * @param favicon     */    @Override    public void onPageStarted(WebView view, String url, Bitmap favicon) {        super.onPageStarted(view, url, favicon);    }    /**     * 加载完成时要做的工作     * @param view     * @param url     */    @Override    public void onPageFinished(WebView view, String url) {        super.onPageFinished(view, url);    }    /**     * 加载错误时要做的工作     * @param view     * @param request     * @param error     */    @Override    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {        super.onReceivedError(view, request, error);    }}

四 加载HTML代码

       WebView有如下两个方法可以加载html代码:
方法一:
public void loadData(String data, String mimeType, String encoding) {   ......}

方法二:
public void loadDataWithBaseURL(String baseUrl, String data,        String mimeType, String encoding, String historyUrl) {
 ......
}
 关键参数:
data:指定需要加载的html代码;
mimeType:指定html代码的MIME类型,可以为text/html;
encoding:字符集编码,如utf-8;
要加载html代码,必须要有html代码:
StringBuilder builder = new StringBuilder();builder.append("<html>").append("<head>")        .append("<title> 欢迎您 </title>").append("</head>")        .append("<body>")        .append("<h2> 欢迎您访问 <a href =\"http://blog.csdn.net/lu1024188315\" > 小石头的博客 </a> <h2>")        .append("</body>").append("</html>");
加载html代码:
webView.loadDataWithBaseURL(null,builder.toString(),"text/html","utf-8",null);
说明,最好使用方法二加载html代码,因为使用方法一加载容易出现乱码。

示例完整代码(点击查看)

五 加载HTML文件

       WebView不仅仅可以加载HTML页面,如果HTML页面中添加JavaScript脚本,还可以反过来调用Android的方法,接下来将编辑一个示例,加载本地html文件,并且使用JS脚本实现点击效果。
首先在assets文件编辑一个html文件,结构如下:

html代码:
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>JS 调用Android </title></head><form>    <!-- 注意此处myObj是android 暴露出来的对象 -->    <input type="button"  value="打招呼"           onclick="myObj.showToast('孙悟空')"/>    <input type="button"  value="图书列表"           onclick="myObj.showList()"/></form></html>
说明,如果点击按钮“打招呼”,myObj会调用方法showToast();如果点击按钮“图书列表”,myObj会调用方法showLIst(),其中myObj是webView暴露出来的MyObject对象实例。
再者,webview启动JS调用:
WebSettings webSettings = webView.getSettings();//开启JS调用webSettings.setJavaScriptEnabled(true);
然后,自定义MyObject对象:
public class MyObject {    Context context;    public MyObject(Context context) {        this.context = context;    }    /**     * 需要被JS调用的方法必须得使用JavascriptInterface类进行注解,否则是无法被调用的     * @param content     */    @JavascriptInterface    public void showToast(String content){        Toast.makeText(context, content, Toast.LENGTH_SHORT).show();    }    @JavascriptInterface    public void showList(){        final String[] items = new String[]{"计算机维护","Java","计算机组成原理"};        new AlertDialog.Builder(context).setTitle("图书列表").setIcon(R.mipmap.ic_launcher)                .setItems(items, new DialogInterface.OnClickListener() {                    @Override                    public void onClick(DialogInterface dialog, int which) {                        Toast.makeText(context, items[which], Toast.LENGTH_SHORT).show();                    }                }).setPositiveButton("确定" ,null).create().show();    }}
说明,需要被JS脚本调用的方法必须使用JavascriptInterface注解,否则是无效的。
再者,将MyObject暴露给JS:
webView.addJavascriptInterface(new MyObject(this),"myObj");
最后,加载页面:
webView.loadUrl("file:///android_asset/test.html");
说明,这里的html文件放到了assets文件中,加载的规则是:file:///android_asset/xxx.html
效果图:


示例完整代码(点击查看)