WebView之简识-CSDN博客

本文链接：https://blog.csdn.net/lu1024188315/article/details/78063287

一前言

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="打招呼"
           οnclick="myObj.showToast('孙悟空')"/>
    <input type="button"  value="图书列表"
           οnclick="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。

效果图：

示例完整代码（点击查看）

WebView之简识

一 前言

二 属性与方法

三 加载普通页面

四 加载HTML代码

五 加载HTML文件

一前言

二属性与方法

三加载普通页面

四加载HTML代码

五加载HTML文件