Android webview详解《1》

        从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);

  1. getSettings.setSupportZoom(false);//设置WebView是否支持使用屏幕控件或手势进行缩放，默认是true，支持缩放。

  2. getSettings.setMediaPlaybackRequiresUserGesture(false);// 设置WebView是否通过手势触发播放媒体，默认是true，需要手势触发。

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

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

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

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

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

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

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

  1. setAcceptThirdPartyCookies(boolean accept)
    设置WebView访问第三方Cookies策略，参考CookieManager提供的方法：setShouldAcceptThirdPartyCookies。
    getSettings.setAcceptThirdPartyCookies(false);

  2. setUseWideViewPort(boolean use)//设置WebView是否使用viewport，当该属性被设置为false时，加载页面的宽度总是适应WebView控件宽度；当被设置为true，当前页面包含viewport属性标签，在标签中指定宽度值生效，如果页面不包含viewport标签，无法提供一个宽度值，这个时候该方法将被使用。
    getSettings.setUseWideViewPort(false)；

  3. setSupportMultipleWindows(boolean support)
    设置WebView是否支持多屏窗口，参考WebChromeClient#onCreateWindow，默认false，不支持。
    getSettings.setSupportMultipleWindows(true);

  4. setLayoutAlgorithm(LayoutAlgorithm l)
    设置WebView底层的布局算法，参考LayoutAlgorithm#NARROW_COLUMNS，将会重新生成WebView布局
    getSettings.setLayoutAlgorithm(LayoutAlgorithm l)；

  5. setStandardFontFamily(String font)
    设置WebView标准字体库字体，默认字体“sans-serif”。
    getSettings.setStandardFontFamily("sans-serif");

  6. setFixedFontFamily(String font)
    设置WebView固定的字体库字体，默认“monospace”。
    getSettings.setFixedFontFamily("monospace");

  7. setSansSerifFontFamily(String font)
    设置WebView Sans SeriFontFamily字体库字体，默认“sans-serif”。
    getSettings.setSansSerifFontFamily("sans-serif");

  8. setSerifFontFamily(String font)
    设置WebView seri FontFamily字体库字体，默认“sans-serif”。
    getSettings.setSansSerifFontFamily("sans-serif");

  9. setCursiveFontFamily(String font)
    设置WebView字体库字体，默认“cursive”
    getSettings.setCursiveFontFamily("cursive");

  10. setFantasyFontFamily(String font)
    设置WebView字体库字体，默认“fantasy”。
    getSettings.setFantasyFontFamily("fantasy");

  11. setMinimumFontSize(int size)
    设置WebView字体最小值，默认值8，取值1到72
    getSettings.setMinimumFontSize(8);

  12. setMinimumLogicalFontSize(int size)
    设置WebView逻辑上最小字体值，默认值8，取值1到72
    getSettings.setMinimumLogicalFontSize(8);

  13. setDefaultFontSize(int size)
    设置WebView默认值字体值，默认值16，取值1到72
    getSettings.setDefaultFontSize(16);

  14. setDefaultFixedFontSize(int size)
    设置WebView默认固定的字体值，默认值16，取值1到72
    getSettings.setDefaultFixedFontSize(16);

  15. setLoadsImagesAutomatically(boolean flag)
    设置WebView是否加载图片资源，默认true，自动加载图片
    getSettings.setLoadsImagesAutomatically(false);

  16. setBlockNetworkImage(boolean flag)
    设置WebView是否以http、https方式访问从网络加载图片资源，默认false
    getSettings.setBlockNetworkImage(true);

  17. setBlockNetworkLoads(boolean flag)
    设置WebView是否从网络加载资源，Application需要设置访问网络权限，否则报异常
    getSettings.setBlockNetworkLoads(true);

  18. setJavaScriptEnabled(boolean flag)
    设置WebView是否允许执行JavaScript脚本，默认false，不允许
    getSettings.setJavaScriptEnabled(true);

  19. setAllowUniversalAccessFromFileURLs(boolean flag)
    设置WebView运行中的脚本可以是否访问任何原始起点内容，默认true
    getSettings.setAllowUniversalAccessFromFileURLs(false);

  20. setAllowFileAccessFromFileURLs(boolean flag)
    设置WebView运行中的一个文件方案被允许访问其他文件方案中的内容，默认值true
    getSettings.setAllowFileAccessFromFileURLs(false);

  21. setGeolocationDatabasePath(String databasePath)
    设置WebView保存地理位置信息数据路径，指定的路径Application具备写入权限

getSettings.setGeolocationDatabasePath(String path);

  1. setAppCacheEnabled(boolean flag)
    设置Application缓存API是否开启，默认false，设置有效的缓存路径参考setAppCachePath(String path)方法
    getSettings.setAppCacheEnabled(true);

  2. setAppCachePath(String appCachePath)
    设置当前Application缓存文件路径，Application Cache API能够开启需要指定Application具备写入权限的路径
    getSettings.setAppCachePath(String appCachePath);

  3. setDatabaseEnabled(boolean flag)
    设置是否开启数据库存储API权限，默认false，未开启，可以参考setDatabasePath(String path)
    getSettings.setDatabaseEnabled(false);

  4. setDomStorageEnabled(boolean flag)
    设置是否开启DOM存储API权限，默认false，未开启，设置为true，WebView能够使用DOM storage API
    getSettings.setDomStorageEnabled(true);

  5. setGeolocationEnabled(boolean flag)
    设置是否开启定位功能，默认true，开启定位
    getSettings.setGeolocationEnabled(false);

  6. setJavaScriptCanOpenWindowsAutomatically(boolean flag)
    设置脚本是否允许自动打开弹窗，默认false，不允许
    getSettings.setJavaScriptCanOpenWindowsAutomatically(true);

  7. setDefaultTextEncodingName(String encoding)
    设置WebView加载页面文本内容的编码，默认“UTF-8”。
    getSettings.setDefaultTextEncodingName("UTF-8");

  8. setUserAgentString(String ua)
    设置WebView代理字符串，如果String为null或为空，将使用系统默认值
    getSettings.setUserAgentString(String ua);

  9. setNeedInitialFocus(boolean flag)
    设置WebView是否需要设置一个节点获取焦点当被回调的时候，默认true
    getSettings.setNeedInitialFocus(false);

  10. setCacheMode(int mode)
    重写缓存被使用到的方法，该方法基于Navigation Type，加载普通的页面，将会检查缓存同时重新验证是否需要加载，如果不需要重新加载，将直接从缓存读取数据，允许客户端通过指定LOAD_DEFAULT、LOAD_CACHE_ELSE_NETWORK、LOAD_NO_CACHE、LOAD_CACHE_ONLY其中之一重写该行为方法，默认值LOAD_DEFAULT
    getSettings.setCacheMode(WebSettings.LOAD_DEFAULT);

  11. 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";
  }
  1. WebView调用JavaScript无参无返回值函数
String call = "javascript:readyToGo()";
webView.loadUrl(call);
  1. WebView调用JavScript有参无返回值函数
String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);
  1. 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方法

  1. 编写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·开车指南

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,530评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,403评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,120评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,770评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,758评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,649评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,021评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,675评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,931评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,410评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,004评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2赞 343

推荐阅读更多精彩内容