专栏首页Android学习之路WebView最基本的使用

WebView最基本的使用

WebView

Android内置webkit内核的高性能浏览器,而WebView则是在这个基础上进行封装后的一个 控件,WebView直译网页视图,我们可以简单的看作一个可以嵌套到界面上的一个浏览器控件! 在 版本之后内核换成了 chrome 内核,但是 对外的API并没有更换

相关的类和方法

WebChromeClient

主要处理 对话框,网站title,icon 加载进度 等;侧重于对 内容的处理

方法

作用

onJsAlert(WebView view,String url,String message,JsResult result)

对js中alert对话框的处理

onJsConfirm(WebView view,String url,String message,JsResult result)

对js中confirm对话框的处理

onJsPrompt(WebView view,String url,String message,String defaultValue,JsPromptResult result)

对js中 Prompt对话框的处理

onProgressChanged(WebView view,int newProgress)

当加载进度发生变化时调用

onReceivedIcon(WebView view, Bitmap icon)

获得网页的icon

onReceivedTitle(WebView view,String title)

获取网页的标题

注意点: 在对话框处理完之后要对网页做出回应确认处理完成(result.confirm();)不让网页就会卡在 对话框那个地方 ,无法再次进行相应

private WebChromeClient chromeClient = new WebChromeClient(){

     //网页加载进度显示
     @Override
     public void onProgressChanged(WebView view, int newProgress) {
         Log.i(TAG, "onProgressChanged: progress="+newProgress);
         if (newProgress!=100){
             pb.setVisibility(View.VISIBLE);
             pb.setProgress(newProgress);
         }else{
             pb.setVisibility(View.GONE);
         }
     }

     @Override
     public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
         Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
         //确认交互完成 提交结果 勿忘
         result.confirm();
         return true;
     }
 };

WebViewClient

主要处理WebView的各种请求通知; 侧重于对浏览器本身事件重写

方法

作用

onPageStared(WebView view,String url)

通知主程序网页开始加载

onPageFinished(WebView view,String url,Bitmap favicon)

通知主程序网页加载完毕

doUpdateVisitedHistory(WebView view,String url,boolean isReload)

更新历史记录

onLoadResource(WebView view,String url)

通知主程序即将加载指定url的资源

onScaleChanged(WebView view,float oldScale,float newScale)

WebView的缩放改变时调用

shouldOverrideKeyEvent(WebView view,KeyEvent event)

控制WebView是否处理按键事件,如果返回true则处理,返回false则不处理

shouldOverrideUrlLoading(WebView view,String url)

控制对新加载的url的处理;例如在本view打开,返回true说明 处理 ,返回false说明不处理;

onReceivedError(WebView view,int errorCode,String description,String failingUrl)

遇到不可恢复的错误信息时调用

注意点: shouldOverrideUrlLoading(WebView view,String url) 在 API 21中过时; 替代方法为shouldOverrideUrlLoading(WebView view, WebResourceRequest request)

//主要处理WebView的各种请求通知 侧重于 对 浏览器本身事件重写
private WebViewClient viewClient = new WebViewClient(){

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        Log.i(TAG, "shouldOverrideUrlLoading: url="+url);
        //当打开一个新的 url 时在本view打开,不跳转至浏览器
        view.loadUrl(url);
        return true;
    }
};

WebSettings

WebView相关配置的设置,比如setJavaScriptEnabled()设置是否允许JS脚本执行 部分方法如下:

方法

作用

setUseWideViewPort(boolean enabled)

是否支持viewPort

setLoadWithOverviewMode(boolean enabled)

自适应屏幕

setSupportZoom(boolean enabled)

是否支持缩放

setBuiltInZoomControls(boolean enabled)

目前没测试

setDisplayZoomControls(boolean enabled)

是否支持缩放控件

setDefaultFontSize(int size)

设置默认字体大小

setDefaultTextEncodingName(String encoding)

默认字符编码可用来解决中文乱码问题

setJavaScriptEnabled(boolean enabled)

是否支持js交互

//支持js交互
webView.getSettings().setJavaScriptEnabled(true);

//设置默认编码方式
webView.getSettings().setDefaultTextEncodingName("utf-8");

 webView.getSettings().setDefaultFontSize(20);

WebView 自身的常用方法

方法

作用

loadUrl(String url)

加载指定的url

loadData(String data,String mimeType,String encoding)

加载指定的Data到WebView中.使用”data:”作为标记头,该方法不能加载网络数据.其中mimeType为数据类型如:textml,image/jpeg. encoding为字符的编码方式

loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)

loadData的升级版 可以以baseUrl为标准路径加载相应的文件等

getSettings()

返回一个WebSettings对象,用来控制WebView的属性设置

setWebViewClient(WebViewClient client)

为WebView指定一个WebViewClient对象

setWebChromeClient(WebChromeClient client)

为WebView制定一个 WebChromeClient对象

setBackgroundColor(int color)

设置WebView的背景颜色

setOnScrollChangeListener(View.OnScrollChangeListener changeListener)

滚动条滚动监听,在API 23 加入

注意点: WebView 背景色 需要代码进行设置 ;xml属性不好使;

加载指定的Url loadUrl();

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

加载网页代码 loadData();如果出现中文乱码问题 需要修改 mimeType 为text/html;charset=utf-8

//加载网页代码
webView.loadData("<h1>title</h1>","text/html","utf-8");

基于一个url加载代码 loadDataWithBaseURL()不需要考虑中文乱码问题

//加载 以url为基准的数据 比loadData 更加强大
//parameter1 :代码内容中相对地址的基准路径
//parameter2 :网页代码
//parameter3 :数据的内容类型
//parameter4 : 编码
//parameter5 :上一个页面地址
webView.loadDataWithBaseURL("http://www.baidu.com","<html><h1>title</h1>this is content</html>","text/html","utf-8",null);

实例

加载 assets 目录下网页

  • 目录结构
  • html 代码
     <html>
    <head>
        <link type="text/css" rel="stylesheet" href="css/index.css"/>

        <script type="text/javascript" src="js/index.js"></script>
    </head>

    <body>
        <table class="table">
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>价格</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>0</td>
                <td>节操</td>
                <td>0</td>
                <td onclick="del(this)">删除</td>
            </tr>
            <tr>
                <td>1</td>
                <td>贞操</td>
                <td>0</td>
                <td onclick="del(this)">删除</td>
            </tr>
        </table>
    </body>
</html>
  • css
   table{
   border:double 2px #ccc ;
}
  • js
    function del(delBt){
   var result = confirm("确定删除吗?");
   alert("===="+result);
}
  • 加载html文件
/**
 *  加载 assets目录下文件
 * @return
 */
public String getIndex() {
    InputStream  is =null;
    BufferedReader reader = null;
    try {
         is = getAssets().open("index.html");
         reader = new BufferedReader(new InputStreamReader(is));
        StringBuffer sb = new StringBuffer();
        while (reader.ready()){
            sb.append(reader.readLine().trim());
        }
        Log.i(TAG, "getIndex: html="+sb.toString());
        return sb.toString();
    } catch (IOException e) {
        e.printStackTrace();
    }finally {

            try {
                 if (is!=null){
                     is.close();
                 }
                if (reader!=null){
                    reader.close();
                }
            } catch (IOException e) {
                e.printStackTrace();

        }
    }
    return "";
}
  • loadDataWithBaseURL加载html网页因为使用外部样式 需要使用 loadDataWithBaseUrl() 因为这个可以使用相对基准路径 可以将assets目录作为 基准目录;html 根据基准目录加载响应的css
 String data = getIndex();
webView.loadDataWithBaseURL("file:///android_asset/",data,"text/html","utf-8",null);
注意点:
     路径的格式  :file:///android_asset/
  • 开启 js交互
 //支持js交互
webView.getSettings().setJavaScriptEnabled(true);
//背景色
webView.setBackgroundColor(Color.GRAY);
  • 效果 可以看到 css文件 加载到了 边框已经显示出来了

; 原始的 网页confirm 确认框

; 处理原始网页confirm 改为 AlertDialog对话框
//处理JavaScript confirm 对话框
@Override
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
    new AlertDialog.Builder(MainActivity.this)
        .setTitle("确认提示")
        .setMessage(message)
        .setNegativeButton("Ok", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                result.confirm();
            }
        })
        .setNeutralButton("cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                result.cancel();
            }
        })
        .show();
    return true;
}

对 alert 对话框进行处理 改为 Toast显示

            @Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
    //确认交互完成 提交结果 勿忘
    result.confirm();
    return true;
}

;

获取网站的 title ico信息

重写 WebChromeClient内部方法

chromeClient = new WebChromeClient(){
    //获取 title
    @Override
    public void onReceivedTitle(WebView view, String title){
        tvTitle.setText(title);
    }
    //获取 icon
    @Override
    public void onReceivedIcon(WebView view, Bitmap icon) {
        ImgIcon.setImageBitmap(icon);
    }
};

;

WebView 的滚动监听

在API 23 加入了滚动监听的 get/set方法 ; 在API 23之前需要重写 WebView的 protected void onScrollChanged(final int l, final int t, final int oldl,final int oldt){}然后再对外提供一个接口

//滚动条监听
webView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
    @Override
    public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
//                Log.e(TAG, "onScrollChange: scrollX="+scrollX);
//                Log.e(TAG, "onScrollChange: oldScrollX="+oldScrollX);
        Log.e(TAG, "onScrollChange: scrollY="+scrollY);
//                Log.e(TAG, "onScrollChange: oldScrollY="+oldScrollY);
        if (scrollY>0){
            floatButton.setVisibility(View.VISIBLE);
        }else{
            floatButton.setVisibility(View.GONE);
        }
        dy = scrollX;
    }
});

关于滚动条的设置

webView.setHorizontalScrollBarEnabled(false);  //水平滚动条不显示
webView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY); //WebView内部显示

回到顶部 实现 使用 方法 scrollTo(x,y);

floatButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Log.i(TAG, "onClick: dy="+dy);
            webView.scrollTo(0,0);
            floatButton.setVisibility(View.GONE);
        }
    });

网页自适应

必须两个都写上, 缺一不可

settings.setUseWideViewPort(true);    //支持 viewport
settings.setLoadWithOverviewMode(true);   //自适应屏幕

;

;

支持缩放网页隐蔽缩放控件

//保留缩放功能 隐藏缩放控件
settings.setBuiltInZoomControls(true);
settings.setDisplayZoomControls(false);
settings.setSupportZoom(true);        //支持缩放

回退键实现 返回网页回退 而不退出程序

重写 onBackPressed() 通过 canGoBack()判断是否能够回退 ,通过 goBack()实现回退

@Override
public void onBackPressed() {
    //判断 WebView 是否可以回退
    if (webView.canGoBack()){
        webView.goBack();
    }else{
            Log.e(TAG, "onBackPressed: currentTimeMillis="+System.currentTimeMillis());
            Log.e(TAG, "onBackPressed: exit="+exit);
            Log.e(TAG, "onBackPressed: currentTimeMillis- exit="+(System.currentTimeMillis()-exit));
        if (System.currentTimeMillis()-exit >2000){
            Toast.makeText(this, "再按一次退出", Toast.LENGTH_SHORT).show();
            exit= System.currentTimeMillis();
        }else{
            super.onBackPressed();

        }
    }
}

与js交互 js调用本地API

调用js function

未完待续。。。。

参考文章: http://www.runoob.com/w3cnote/android-tutorial-webview.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Dagger2使用攻略-基础部分

    在这篇文章中,我会介绍 什么是依赖注入,Dagger2是什么,解决什么问题以及基础注解的使用

    佛系编码
  • The application could not be installed INSTALL_PARSE_FAILED_BAD_PACKAGE_NAME

    Installation did not succeed. The application could not be installed: INSTALL_PA...

    佛系编码
  • Activity

    佛系编码
  • 史上最全webview详解

    WebView在现在的项目中使用的频率应该还是非常高的。 我个人总觉得HTML5是一种趋势。找了一些东西,在此总结。 本篇最后有一个非常不错 的 Html5...

    xiangzhihong
  • 访问权限控制

    访问权限控制又称「隐藏具体实现」,也就是说,我们可以通过它来决定某个类或者类中的成员在程序中的可见范围。例如,被修饰为 public 的元素在全局范围可见,而被...

    Single
  • k8s源码分析-----kube-scheduler

    第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

    月牙寂道长
  • 2000字详解:极大似然估计, 最大后验概率估计

    统计学中,似然函数是一种关于统计模型参数的函数。给定输出x时,关于参数θ的似然函数为L(θ|x),似然函数在数值上等价与给定θ后的

    double
  • 如何对 iOS 启动阶段耗时进行分析

    启动优化一役后,超预期将所负责的 App 双端启动的耗时都降低了65%以上,iOS 在iPhone7上速度达到了400毫秒以内。就像产品们用后说的,快到不习惯。...

    用户7451029
  • 关于安防摄像头RTSP/Onvif协议网页无插件直播视频流媒体服务器EasyNVR、EasyDSS获取指定时间段录像接口的使用介绍

    随着雪亮工程、明厨亮灶、手机看店、智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网、微信直播,我们知道摄像头直播的春天了。将安防摄像头或NVR上的视频流转成...

    EasyNVR
  • 【自然框架】之表单控件(一)实体类(Class)VS 字典(Dictionary)

    用一个具体一点的例子来说一下,我实现单表的添加、修改的思路和方式,顺便和三层里的实体类的方式做一下对比。 一、我的拆分思想之一       简单的操作和复杂的操...

    用户1174620

扫码关注云+社区

领取腾讯云代金券