Android webview详解《1》

作者: 天空在微笑 | 来源:发表于2018-10-19 14:04 被阅读28次

从Android 4.4（KitKat）开始，原本基于WebKit的WebView开始基于Chromium内核，这一改动大大提升了WebView组件的性能以及对HTML5,CSS3,JavaScript的支持。不过它的API却没有很大的改动，在兼容低版本的同时只引进了少部分新的API，并不需要你做很大的改动。
在WebView中，有几个地方是我们可以使用来定制我们的WebView各种行为的，分别是：

WebSettings
JavaScriptInterface
WebViewClient
WebChromeClient。

WebView基本使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

然后在Activity的onCreate方法里写入如下代码：

String url = "https://www.google.com";
WebView webView = (WebView) findViewById(R.id.web_view);
webView.loadUrl(url);

接着在AndroidManifest声明访问网络的权限：

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

加载网页的方式

loadData(String data, String mimeType, String encoding)

des:Load the given data into the WebView.
as:
String summary = "<html><body>You scored <b>192</b> points.</body></html>";
webview.loadData(summary, "text/html", null);
loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)

des:Load the given data into the WebView, use the provided URL as the base URL for the content.
loadUrl(String url)

des:Load the given url.

as: webView.loadUrl("http://www.jianshu.com/"); //加载网络网页

webView.loadUrl("file:///android_asset/html/index.html"); //加载本地assert目录下网页

webView.loadUrl("content://com.Android.htmlfileprovider/sdcard/kris.html"); // 加载SD卡html
loadUrl(String url, Map<String, String> extraHeaders)

Load the given url with the extra headers.
postUrl(String url, byte[] postData)

des: Loads the URL with postData using "POST" method into this WebView.
利用Intent调用系统浏览器

Uri uri = Uri.parse("http://www.jianshu.com/");

Intent intent = new Intent(Intent.ACTION_VIEW, uri);

startActivity(intent);

getSettings.setSupportZoom(false);//设置WebView是否支持使用屏幕控件或手势进行缩放，默认是true，支持缩放。
getSettings.setMediaPlaybackRequiresUserGesture(false);// 设置WebView是否通过手势触发播放媒体，默认是true，需要手势触发。

getSettings.setBuiltInZoomControls(true); //
设置WebView是否使用其内置的变焦机制，该机制集合屏幕缩放控件使用，默认是false，不使用内置变焦机制。

getSettings.setDisplayZoomControls(false); //
设置WebView使用内置缩放机制时，是否展现在屏幕缩放控件上，默认true，展现在控件上。

getSettings.setAllowFileAccess(false); //
设置在WebView内部是否允许访问文件，默认允许访问。

getSettings.setAllowContentAccess(false); //
设置WebView是否使用其内置的变焦机制，该机制结合屏幕缩放控件使用，默认是false，不使用内置变焦机制。

getSettings.setLoadWithOverviewMode(false); //设置WebView是否使用预览模式加载界面。

getSettings.setSaveFormData(false); //
设置WebView是否保存表单数据，默认true，保存数据。

getSettings.setTextZoom(100); //
设置WebView中加载页面字体变焦百分比，默认100，整型数。

setAcceptThirdPartyCookies(boolean accept)
设置WebView访问第三方Cookies策略，参考CookieManager提供的方法：setShouldAcceptThirdPartyCookies。
getSettings.setAcceptThirdPartyCookies(false);
setUseWideViewPort(boolean use)//设置WebView是否使用viewport，当该属性被设置为false时，加载页面的宽度总是适应WebView控件宽度；当被设置为true，当前页面包含viewport属性标签，在标签中指定宽度值生效，如果页面不包含viewport标签，无法提供一个宽度值，这个时候该方法将被使用。
getSettings.setUseWideViewPort(false)；
setSupportMultipleWindows(boolean support)
设置WebView是否支持多屏窗口，参考WebChromeClient#onCreateWindow，默认false，不支持。
getSettings.setSupportMultipleWindows(true);
setLayoutAlgorithm(LayoutAlgorithm l)
设置WebView底层的布局算法，参考LayoutAlgorithm#NARROW_COLUMNS，将会重新生成WebView布局
getSettings.setLayoutAlgorithm(LayoutAlgorithm l)；
setStandardFontFamily(String font)
设置WebView标准字体库字体，默认字体“sans-serif”。
getSettings.setStandardFontFamily("sans-serif");
setFixedFontFamily(String font)
设置WebView固定的字体库字体，默认“monospace”。
getSettings.setFixedFontFamily("monospace");
setSansSerifFontFamily(String font)
设置WebView Sans SeriFontFamily字体库字体，默认“sans-serif”。
getSettings.setSansSerifFontFamily("sans-serif");
setSerifFontFamily(String font)
设置WebView seri FontFamily字体库字体，默认“sans-serif”。
getSettings.setSansSerifFontFamily("sans-serif");
setCursiveFontFamily(String font)
设置WebView字体库字体，默认“cursive”
getSettings.setCursiveFontFamily("cursive");
setFantasyFontFamily(String font)
设置WebView字体库字体，默认“fantasy”。
getSettings.setFantasyFontFamily("fantasy");
setMinimumFontSize(int size)
设置WebView字体最小值，默认值8，取值1到72
getSettings.setMinimumFontSize(8);
setMinimumLogicalFontSize(int size)
设置WebView逻辑上最小字体值，默认值8，取值1到72
getSettings.setMinimumLogicalFontSize(8);
setDefaultFontSize(int size)
设置WebView默认值字体值，默认值16，取值1到72
getSettings.setDefaultFontSize(16);
setDefaultFixedFontSize(int size)
设置WebView默认固定的字体值，默认值16，取值1到72
getSettings.setDefaultFixedFontSize(16);
setLoadsImagesAutomatically(boolean flag)
设置WebView是否加载图片资源，默认true，自动加载图片
getSettings.setLoadsImagesAutomatically(false);
setBlockNetworkImage(boolean flag)
设置WebView是否以http、https方式访问从网络加载图片资源，默认false
getSettings.setBlockNetworkImage(true);
setBlockNetworkLoads(boolean flag)
设置WebView是否从网络加载资源，Application需要设置访问网络权限，否则报异常
getSettings.setBlockNetworkLoads(true);
setJavaScriptEnabled(boolean flag)
设置WebView是否允许执行JavaScript脚本，默认false，不允许
getSettings.setJavaScriptEnabled(true);
setAllowUniversalAccessFromFileURLs(boolean flag)
设置WebView运行中的脚本可以是否访问任何原始起点内容，默认true
getSettings.setAllowUniversalAccessFromFileURLs(false);
setAllowFileAccessFromFileURLs(boolean flag)
设置WebView运行中的一个文件方案被允许访问其他文件方案中的内容，默认值true
getSettings.setAllowFileAccessFromFileURLs(false);
setGeolocationDatabasePath(String databasePath)
设置WebView保存地理位置信息数据路径，指定的路径Application具备写入权限

getSettings.setGeolocationDatabasePath(String path);

setAppCacheEnabled(boolean flag)
设置Application缓存API是否开启，默认false，设置有效的缓存路径参考setAppCachePath(String path)方法
getSettings.setAppCacheEnabled(true);
setAppCachePath(String appCachePath)
设置当前Application缓存文件路径，Application Cache API能够开启需要指定Application具备写入权限的路径
getSettings.setAppCachePath(String appCachePath);
setDatabaseEnabled(boolean flag)
设置是否开启数据库存储API权限，默认false，未开启，可以参考setDatabasePath(String path)
getSettings.setDatabaseEnabled(false);
setDomStorageEnabled(boolean flag)
设置是否开启DOM存储API权限，默认false，未开启，设置为true，WebView能够使用DOM storage API
getSettings.setDomStorageEnabled(true);
setGeolocationEnabled(boolean flag)
设置是否开启定位功能，默认true，开启定位
getSettings.setGeolocationEnabled(false);
setJavaScriptCanOpenWindowsAutomatically(boolean flag)
设置脚本是否允许自动打开弹窗，默认false，不允许
getSettings.setJavaScriptCanOpenWindowsAutomatically(true);
setDefaultTextEncodingName(String encoding)
设置WebView加载页面文本内容的编码，默认“UTF-8”。
getSettings.setDefaultTextEncodingName("UTF-8");
setUserAgentString(String ua)
设置WebView代理字符串，如果String为null或为空，将使用系统默认值
getSettings.setUserAgentString(String ua);
setNeedInitialFocus(boolean flag)
设置WebView是否需要设置一个节点获取焦点当被回调的时候，默认true
getSettings.setNeedInitialFocus(false);
setCacheMode(int mode)
重写缓存被使用到的方法，该方法基于Navigation Type，加载普通的页面，将会检查缓存同时重新验证是否需要加载，如果不需要重新加载，将直接从缓存读取数据，允许客户端通过指定LOAD_DEFAULT、LOAD_CACHE_ELSE_NETWORK、LOAD_NO_CACHE、LOAD_CACHE_ONLY其中之一重写该行为方法，默认值LOAD_DEFAULT
getSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
setMixedContentMode(int mode)
设置当一个安全站点企图加载来自一个不安全站点资源时WebView的行为，android.os.Build.VERSION_CODES.KITKAT默认为MIXED_CONTENT_ALWAYS_ALLOW，android.os.Build.VERSION_CODES#LOLLIPOP默认为MIXED_CONTENT_NEVER_ALLOW，取值其中之一：MIXED_CONTENT_NEVER_ALLOW、MIXED_CONTENT_ALWAYS_ALLOW、MIXED_CONTENT_COMPATIBILITY_MODE.

getSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);

WebViewClient

从名字上不难理解，这个类就像WebView的委托人一样，是帮助WebView处理各种通知和请求事件的，我们可以称他为WebView的“内政大臣”。

onLoadResource(WebView view, String url)：该方法在加载页面资源时会回调，每一个资源（比如图片）的加载都会调用一次。
onPageStarted(WebView view, String url, Bitmap favicon)：该方法在WebView开始加载页面且仅在Main frame loading（即整页加载）时回调，一次Main frame的加载只会回调该方法一次。我们可以在这个方法里设定开启一个加载的动画，告诉用户程序在等待网络的响应。
onPageFinished(WebView view, String url)：该方法只在WebView完成一个页面加载时调用一次（同样也只在Main frame loading时调用），我们可以可以在此时关闭加载动画，进行其他操作。
onReceivedError(WebView view, WebResourceRequest request, WebResourceError error)：该方法在web页面加载错误时回调，这些错误通常都是由无法与服务器正常连接引起的，最常见的就是网络问题。这个方法有两个地方需要注意：

1.这个方法只在与服务器无法正常连接时调用，类似于服务器返回错误码的那种错误（即HTTP ERROR），该方法是不会回调的，因为你已经和服务器正常连接上了（全怪官方文档(︶^︶)）；
2.这个方法是新版本的onReceivedError()方法，从API23开始引进，与旧方法onReceivedError(WebView view,int errorCode,String description,String failingUrl)不同的是，新方法在页面局部加载发生错误时也会被调用（比如页面里两个子Tab或者一张图片）。这就意味着该方法的调用频率可能会更加频繁，所以我们应该在该方法里执行尽量少的操作。

onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse)：上一个方法提到onReceivedError并不会在服务器返回错误码时被回调，那么当我们需要捕捉HTTP ERROR并进行相应操作时应该怎么办呢？API23便引入了该方法。当服务器返回一个HTTP ERROR并且它的status code>=400时，该方法便会回调。这个方法的作用域并不局限于Main Frame，任何资源的加载引发HTTP ERROR都会引起该方法的回调，所以我们也应该在该方法里执行尽量少的操作，只进行非常必要的错误处理等。
onReceivedSslError(WebView view, SslErrorHandler handler, SslError error)：当WebView加载某个资源引发SSL错误时会回调该方法，这时WebView要么执行handler.cancel()取消加载，要么执行handler.proceed()方法继续加载（默认为cancel）。需要注意的是，这个决定可能会被保留并在将来再次遇到SSL错误时执行同样的操作。
WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request)：当WebView需要请求某个数据时，这个方法可以拦截该请求来告知app并且允许app本身返回一个数据来替代我们原本要加载的数据。

比如你对web的某个js做了本地缓存，希望在加载该js时不再去请求服务器而是可以直接读取本地缓存的js，这个方法就可以帮助你完成这个需求。你可以写一些逻辑检测这个request，并返回相应的数据，你返回的数据就会被WebView使用，如果你返回null，WebView会继续向服务器请求。

boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)：哈~ 终于到了这个方法，在最开始的基础演示时我们用到了这个方法。从实践中我们知道，当我们没有给WebView提供WebViewClient时，WebView如果要加载一个url会向ActivityManager寻求一个适合的处理者来加载该url（比如系统自带的浏览器），这通常是我们不想看到的。于是我们需要给WebView提供一个WebViewClient，并重写该方法返回true来告知WebView url的加载就在app中进行。这时便可以实现在app内访问网页。
onScaleChanged(WebView view, float oldScale, float newScale)：当WebView得页面Scale值发生改变时回调。
boolean shouldOverrideKeyEvent(WebView view, KeyEvent event)：默认值为false，重写此方法并return true可以让我们在WebView内处理按键事件。

WebChromeClient

如果说WebViewClient是帮助WebView处理各种通知、请求事件的“内政大臣”的话，那么WebChromeClient就是辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等偏外部事件的“外交大臣”。

onProgressChanged(WebView view, int newProgress)：当页面加载的进度发生改变时回调，用来告知主程序当前页面的加载进度。
onReceivedIcon(WebView view, Bitmap icon)：用来接收web页面的icon，我们可以在这里将该页面的icon设置到Toolbar。
onReceivedTitle(WebView view, String title)：用来接收web页面的title，我们可以在这里将页面的title设置到Toolbar。

以下两个方法是为了支持web页面进入全屏模式而存在的（比如播放视频），如果不实现这两个方法，该web上的内容便不能进入全屏模式。

onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)：该方法在当前页面进入全屏模式时回调，主程序必须提供一个包含当前web内容（视频 or Something）的自定义的View。
onHideCustomView()：该方法在当前页面退出全屏模式时回调，主程序应在这时隐藏之前show出来的View。
Bitmap getDefaultVideoPoster()：当我们的Web页面包含视频时，我们可以在HTML里为它设置一个预览图，WebView会在绘制页面时根据它的宽高为它布局。而当我们处于弱网状态下时，我们没有比较快的获取该图片，那WebView绘制页面时的gitWidth()方法就会报出空指针异常~ 于是app就crash了。。

这时我们就需要重写该方法，在我们尚未获取web页面上的video预览图时，给予它一个本地的图片，避免空指针的发生。

View getVideoLoadingProgressView()：重写该方法可以在视频loading时给予一个自定义的View，可以是加载圆环 or something。
boolean onJsAlert(WebView view, String url, String message, JsResult result)：处理Javascript中的Alert对话框。
boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result)：处理Javascript中的Prompt对话框。
boolean onJsConfirm(WebView view, String url, String message, JsResult result)：处理Javascript中的Confirm对话框
boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, WebChromeClient.FileChooserParams fileChooserParams)：该方法在用户进行了web上某个需要上传文件的操作时回调。我们应该在这里打开一个文件选择器，如果要取消这个请求我们可以调用filePathCallback.onReceiveValue(null)并返回true。
onPermissionRequest(PermissionRequest request)：该方法在web页面请求某个尚未被允许或拒绝的权限时回调，主程序在此时调用grant(String [])或deny()方法。如果该方法没有被重写，则默认拒绝web页面请求的权限。

onPermissionRequestCanceled(PermissionRequest request)：该方法在web权限申请权限被取消时回调，这时应该隐藏任何与之相关的UI界面。

Js与WebView交互

既然嗨鸟应用大行其道，那么毫无疑问Android与JavaScript的交互我们也必须了解清楚，下面来介绍一下JavaScript与Android是如何互相调用的。

利用WebView调用网页上的JavaScript代码

在WebView中调用Js的基本格式为

webView.loadUrl("javascript:methodName(parameterValues)");

现有以下这段JavaScript代码

  function readyToGo() {
      alert("Hello")
  }

  function alertMessage(message) {
      alert(message)
  }

  function getYourCar(){
      return "Car";
  }

WebView调用JavaScript无参无返回值函数

String call = "javascript:readyToGo()";
webView.loadUrl(call);

WebView调用JavScript有参无返回值函数

String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);

WebView调用JavaScript有参数有返回值的函数

@TargetApi(Build.VERSION_CODES.KITKAT)
private void evaluateJavaScript(WebView webView){
    webView.evaluateJavascript("getYourCar()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
            Log.d("findCar",s);
        }
    });
}

JavaScript通过WebView调用Java代码

从API19开始，Android提供了@JavascriptInterface对象注解的方式来建立起Javascript对象和Android原生对象的绑定，提供给JavScript调用的函数必须带有@JavascriptInterface。

演示一 JavaScript调用Android Toast方法

编写Java原生方法并用使用@JavascriptInterface注解

@JavascriptInterface
public void show(String s){
    Toast.makeText(getApplication(), s, Toast.LENGTH_SHORT).show();
}

2.注册JavaScriptInterface

webView.addJavascriptInterface(this, "android");
addJavascriptInterface的作用是把this所代表的类映射为JavaScript中的android对象。

3.编写JavaScript代码

function toastClick(){
    window.android.show("JavaScript called~!");
}

演示二 JavaScript调用有返回值的Java方法

1.定义一个带返回值的Java方法，并使用@JavaInterface：

@JavaInterface
public String getMessage(){
    return "Hello,boy~";
}

2.添加JavaScript的映射

webView.addJavaScriptInterface(this,"Android");

3.通过JavaScript调用Java方法

function showHello(){
    var str=window.Android.getMessage();
    console.log(str);
}

Android 中Webview 自适应屏幕

//设置加载进来的页面自适应手机屏幕

settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

第一个方法设置webview推荐使用的窗口，设置为true。第二个方法是设置webview加载的页面的模式，也设置为true。

这方法可以让你的页面适应手机屏幕的分辨率，完整的显示在屏幕上，可以放大缩小。

WebView设置字体默认大小

WebSettings settings = webView.getSettings();  
settings.setDefaultFontSize(22);

Android Webview总结
 WebView·开车指南

Android webview详解《1》

加载网页的方式

loadData(String data, String mimeType, String encoding)

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

loadUrl(String url)

loadUrl(String url, Map<String, String> extraHeaders)

postUrl(String url, byte[] postData)

利用Intent调用系统浏览器

WebViewClient

WebChromeClient

Js与WebView交互

Android 中Webview 自适应屏幕

WebView设置字体默认大小

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android webview