Android WebView基本使用（一）（概述、显示、常用方法）

• 概述
  1. 采用渲染引擎(WebKit)来展示view的内容，提供网页前进后退、网页放大、缩小、搜索等功能。
  2. 高低版本采用不同的WebKit版本内核。
• AndroidManifest添加访问网络的权限

<manifest ... >

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

    ...

</manifest>

 

• 显示的网页

1. 网络地址：WebView.loadUrl(“http://www.google.com”);
2. 本地文件：WebView.loadUrl(“file:///android_asset/XX.html”); 本地文件存放在：assets文件中。
3. app包中assect目录下的html文件

WebView.loadUrl(“content://com.android.htmlfileprovider/sdcard/XX.html”);

1. 加载html的字符串：

String htmlString = "<h1>Title</h1><p>This is HTML XX<br /><i>Formatted in italics</i><br/>AnothorLine</p>";

// 载入这个html页面

WebView.loadData(htmlString, "XX/html", "utf-8");

 

• WebView常见使用
  1. WebView常见方法

//激活WebView为活跃状态，能正常执行网页的响应

webView.onResume() ；

//当页面被失去焦点被切换到后台不可见状态，需要执行onPause()

//通过onPause()动作通知内核暂停所有的动作，比如DOM的解析、JavaScript执行等

webView.onPause()；

//当应用程序(存在webview)被切换到后台时，这个方法不仅仅针对当前的webview而是全局的全应用程序的webview

 //它会暂停所有webview的布局显示、解析、延时，从而降低CPU功耗

webView.pauseTimers()

//恢复pauseTimers状态

webView.resumeTimers()；

//销毁Webview //在关闭了Activity时，如果Webview的音乐或视频，还在播放，就必须销毁Webview。

//但是注意：webview调用destory时,webview仍绑定在Activity上

//这是由于自定义webview构建时传入了该Activity的context对象

//因此需要先从父容器中移除webview,然后再销毁webview

rootLayout.removeView(webView);

webView.destroy();

 

//是否可以后退

Webview.canGoBack()

//后退网页

Webview.goBack()

//是否可以前进

Webview.canGoForward()

//前进网页

Webview.goForward()

//以当前的index为起始点前进或者后退到历史记录中指定的steps

//如果steps为负数则为后退，正数则为前进

Webview.goBackOrForward(intsteps)

 

//清除网页访问留下的缓存

//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.

Webview.clearCache(true);

//清除当前webview访问的历史记录

//只会webview访问历史记录里的所有记录除了当前访问记录

Webview.clearHistory()；

//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据

Webview.clearFormData()；

 

Webview.setOverScrollMode(View.OVER_SCROLL_ALWAYS); //不允许弹性

Webview.setHorizontalScrollBarEnabled(false); // 水平不显示滚动条

Webview.setLayerType(View.LAYER_TYPE_HARDWARE, null);//开启硬件加速

 

1. 1. WebView子类
      1. WebSetting子类——进行配置和管理

//声明WebSettings子类

WebSettings webSettings = Webview.getSettings();

//如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript

webSettings.setJavaScriptEnabled(true);

//支持通过JS打开新窗口

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

 

//支持插件

WebSettings.setPluginsEnabled(true);

 

//支持缩放，下一步的前提

webSettings.setSupportZoom(false);

//设置支持缩放

webSettings.setBuiltInZoomControls(false);

//隐藏原生的缩放控件

WebSettings.setDisplayZoomControls(false);

 

//自适应屏幕，两者合用

//打开页面时， 自适应屏幕,将图片调整到适合webview的大小,设置此属性，可任意比例缩放

webSettings.setUseWideViewPort(true);

//缩放至屏幕的大小

webSettings.setLoadWithOverviewMode(true);

 

//缓存

// LOAD_CACHE_ONLY： //不使用网络，只读取本地缓存数据，

// LOAD_DEFAULT：//根据cache-control决定是否从网络上取数据，

// LOAD_CACHE_NORMAL：//API level 17中已经废弃, 从API level 11开始作用同- - LOAD_DEFAULT模式，

// LOAD_NO_CACHE: //不使用缓存，只从网络获取数据，

// LOAD_CACHE_ELSE_NETWORK //只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。

webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);

 

webSettings.setAllowFileAccess(true); //是否可访问本地文件，默认值 true

webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片

webSettings.setTextZoom(12); //设置字体大小

webSettings.setDomStorageEnabled(true);

webSettings.setDefaultTextEncodingName("UTF-8"); //设置编码格式

webSettings.setAllowContentAccess(true); // 是否可访问Content Provider的资源，默认值 true

// 是否允许通过file url加载的Javascript读取本地文件，默认值 false

webSettings.setAllowFileAccessFromFileURLs(false);

// 是否允许通过file url加载的Javascript读取全部资源(包括文件,http,https)，默认值 false

webSettings.setAllowUniversalAccessFromFileURLs(false);

 

1. 1. 1. WebViewClient子类——处理各种通知和请求事件

webView.setWebViewClient(new WebViewClient(){

//打开网页不用系统浏览器打开，在webview中直接显示

     @Override

     public boolean shouldOverrideUrlLoading(WebView view, String url) {

           view.loadUrl(url);

           return true;

      }

 

//开始载入页面时调用此方法，在这里我们可以设定一个loading的页面，告诉用户程序正在等待网络响应。

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

//设定加载开始的操作

 

}

 

//在页面加载结束时调用。我们可以关闭loading 条，切换程序动作。

@Override

public void onPageFinished(WebView view, String url) {

//设定加载结束的操作

 

}

 

//在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次

@Override

public boolean onLoadResource(WebView view, String url) {

//设定加载资源的操作

 

}

 

//加载页面的服务器出现错误时调用

//App里面使用webview控件的时候遇到了诸如404这类的错误的时候，若也显示浏览器里面的那种错误提示页面就显得很丑陋了，那么这个时候我们的app就需要加载一个本地的错误提示页面，即webview如何加载一个本地的页面

//步骤1：写一个html文件（error_handle.html），用于出错时展示给用户看的提示页面

//步骤2：将该html文件放置到代码根目录的assets文件夹下

//步骤3：复写WebViewClient的onRecievedError方法 //该方法传回了错误码，根据错误类型可以进行不同的错误分类处理

@Override

public void onReceivedError(WebView view, int errorCode, String description, String failingUrl){

switch(errorCode) {

case HttpStatus.SC_NOT_FOUND:

view.loadUrl("file:///android_assets/error_handle.html");

break;

}

}

 

//处理https请求，webView默认是不处理https请求的，页面显示空白

@Override

public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {

handler.proceed(); //表示等待证书响应

// handler.cancel(); //表示挂起连接，为默认方式

// handler.handleMessage(null); //可做其他处理

 

}

});

 

1. 1. 1. WebChromeClient子类——辅助webView处理Javascript的对话框，网站图标，网站标语等

webview.setWebChromeClient(new WebChromeClient(){

 

//获得网页的加载进度并显示

     @Override

     public void onProgressChanged(WebView view, int newProgress) {

          if (newProgress < 100) {

                String progress = newProgress + "%";

                progress.setText(progress);

          } else {

                progress.setText(“100%”);

           }

}

 

//获取Web页中的标题

@Override

public void onReceivedTitle(WebView view, String title) {

titleview.setText(title)；

 }

);

 

1. 1. WebView通过JavaScript的交互
      1. Webview调用h5方法：
         • loadUrl();方法会使界面刷新

//无参调用

Webview.loadUrl(“javascript:javacalljs()”);

//传递参数

Webview.loadUrl(“javascript:javacalljsString(‘”+content+”’)”);

 

• • • • //方法执行不会使界面刷新

WebView.evaluateJavascript(“javascript:javacalljs()”, new ValueCallback<String>(){

@Override

Public void onReceiveValue(String str){

...

}

});

 

1. 1. 1. Webview提供方法，h5调用

//新建一个接口类JavaInterface ，里面定义给Js调用的方法。这些方法必须是public的，而且必 须使用@JavascriptInterface进行注解。

Private class MyJsInterface{

@JavascriptInterface//js接口声明

Public void tackPhoto(){//无参数调用

...

}

 

@JavascriptInterface

Public void setUserId(int userId){//传递参数调用

...

}

 

/**

* 前端代码嵌入js：

* imageClick 名应和js函数方法名一致

*

* @param src 图片的链接

*/

@JavascriptInterface

public void imageClick(String src) {

    ...

}

}

//给Webview添加与Js的映射关系

WebView.addJavascriptInterFace(new MyJsInterface(this) , ”android”);

1. 1. 1. 外部注入Js代码——有时候我们得到一个网页，这个网页并不是我们订制的，里面没有我们调 用的js代码，这时候我们可在前端直接注入js的。

// 这段js函数的功能就是，遍历所有的img节点，并添加onclick函数，函数的功能是在图片点 击的时候调用本地java接口并传递url过去

webView.loadUrl("javascript:(function(){" +

        "var objs = document.getElementsByTagName(\"img\");" +

        "for(var i=0;i<objs.length;i++)" +

        "{" +

        "objs[i].οnclick=function(){window.android.imageClick(this.getAttribute(\"src\"));}" +

        "}" +

        "})()");

1. 1. 1.  

 

1. 1. WebView长按事件

webView.setOnLongClickListener(new View.OnLongClickListener() {

    @Override

    public boolean onLongClick(View v) {

        final WebView.HitTestResult hitTestResult = WebView.getHitTestResult();

        // 如果是图片类型或者是带有图片链接的类型

        if (hitTestResult.getType() == WebView.HitTestResult.IMAGE_TYPE ||

                hitTestResult.getType() == WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {

            // 弹出保存图片的对话框

            new AlertDialog.Builder(WebViewActivity.this)

                    .setItems(new String[]{"查看大图", "保存图片到相册"},

new DialogInterface.OnClickListener() {

                        @Override

                        public void onClick(DialogInterface dialog, int which) {

                            String picUrl = hitTestResult.getExtra();

                            //获取图片

                            Log.e("picUrl", picUrl);

                            switch (which) {

                                case 0:

                                    break;

                                case 1:

                                    break;

                                default:

                                    break;

                            }

                        }

                    })

                    .show();

            return true;

        }

        return false;

    }

});