Android WebView 详解

文章首发于我的个人博客网站-查看原文

本文记录 AndroidWebView 控件的相关使用,不断完善中...

主要包括:

  • 基本属性的配置
  • WebView 缓存相关内容
  • JavaJs 的交互
  • WebView 打开本地应用(支付宝等)
  • 加载网络链接,本地 sd 卡路径,assert 目录路径的方法
  • WebView 支持下载等其它一些内容

基本配置汇总

汇总的记录一下 WebView 的配置方法,重要的属性后面会展开说明。

@SuppressLint("SetJavaScriptEnabled")
public static void initWebViewSettings(WebView mWebView) {
    //支持获取手势焦点
    mWebView.requestFocusFromTouch();
    // 触觉反馈,暂时没发现用处在哪里
    mWebView.setHapticFeedbackEnabled(false);
    WebSettings settings = mWebView.getSettings();
    // 支持插件
    settings.setPluginState(WebSettings.PluginState.ON);
    // 允许js交互
    settings.setJavaScriptEnabled(true);
    // 设置WebView是否可以由 JavaScript 自动打开窗口,默认为 false
    // 通常与 JavaScript 的 window.open() 配合使用。
    settings.setJavaScriptCanOpenWindowsAutomatically(true);
    // 允许中文编码
    settings.setDefaultTextEncodingName("UTF-8");
    // 使用大视图,设置适应屏幕
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    // 支持多窗口
    settings.setSupportMultipleWindows(true);
    // 隐藏自带缩放按钮
    settings.setBuiltInZoomControls(false);
    // 支持缩放
    settings.setSupportZoom(true);
    // 设置可访问文件
    settings.setAllowFileAccess(true);
    // 当WebView调用requestFocus时为WebView设置节点
    settings.setNeedInitialFocus(true);
    //支持自动加载图片
    settings.setLoadsImagesAutomatically(true);
    // 指定WebView的页面布局显示形式,调用该方法会引起页面重绘。
    // NORMAL,SINGLE_COLUMN 过时, NARROW_COLUMNS 过时 ,TEXT_AUTOSIZING
    settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
    // 从Lollipop(5.0)开始WebView默认不允许混合模式,https当中不能加载http资源,需要设置开启
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
    }
}

WebView 缓存

清除缓存,true 表示清除磁盘缓存,这个方法是全局的,也就是说会清除掉整个应用所有的 网页缓存。

mWebView.clearCache(true);

清除历史记录

mWebView.clearHistory();

网上有介绍说,设置缓存的目录,清除缓存时删除掉缓存文件,但是使用下面的方法设置缓存路径后,发现文件并没有缓存到指定的目录,不知道是怎么回事?求指教

缓存模式 描述
LOAD_DEFAULT 默认的缓存使用模式。在进行页面前进或后退的操作时,如果缓存可用并未过期就优先加载缓存,否则从网络上加载数据。这样可以减少页面的网络请求次数。
LOAD_CACHE_ELSE_NETWORK 只要缓存可用就加载缓存,哪怕它们已经过期失效。如果缓存不可用就从网络上加载数据。
LOAD_NO_CACHE 不加载缓存,只从网络加载数据。
LOAD_CACHE_ONLY 不从网络加载数据,只从缓存加载数据。
private static void initWebViewCache(WebView mWebView) {
    
    String cachePath = new File(Environment.getExternalStorageDirectory()
            , "webCache").getAbsolutePath();
    
    WebSettings settings = mWebView.getSettings();
    settings.setAppCacheEnabled(true);
    settings.setAppCachePath(cachePath);
    settings.setDatabaseEnabled(true);
    // 过时
    settings.setDatabasePath(cachePath);
    // 开启dom缓存
    settings.setDomStorageEnabled(true);
    // 加载模式
    settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
    // 缓存最大值,过时
    settings.setAppCacheMaxSize(1000 * 1024);
}

加载 Url

加载网络路径,headers 不是必选的

Map<String,String> headers = new HashMap<>();
headers.put("auth","110");
mWebView.loadUrl("https://www.baidu.com/",headers);

加载 assert 路径

// WebViewUtil.java
public static String getAssertUrl(String fileUrl) {
    return "file:///android_asset/" + fileUrl;
}

mWebView.loadUrl(WebViewUtil.getAssertUrl("index.html"));

加载 sd 卡路径

// WebViewUtil.java
public static String getSdUrl(String fileUrl) {
    return "file://" + Environment.getExternalStorageDirectory() + "/" + fileUrl;
}

mWebView.loadUrl(WebViewUtil.getSdUrl("index.html"));    

Js 调用 Java

JavaJs 交互需要定义一个带有 @JavascriptInterface 注解方法的对象,如下:

public class JsBridge {
 
    @JavascriptInterface
    public void toast(String msg) {
        ToastUtils.show(msg);
    }

    @JavascriptInterface
    public void log(String msg) {
        Log.e(TAG, msg);
    }
}

使用 JsBridge 连接 JavaJs,使用 mWebView.addJavascriptInterface(obj, name); 方法。

  • obj:带有 JavascriptInterface 注解方法的对象实例。
  • name:一个标志符,js 将会使用该标志来调用 java 层的方法。
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsBridge(), "android");

在添加调用接口时,我们添加了一个标记,如上面代码中添加的是 android,它相当于调用接口对象的一个别名,因此在 js 中调用 java 方法时,只需要使用 window 对象,如下:

window.android.log('test js invoke java method');

Java 调用 Js

使用 java 调用 js 方法相对简单,假如在 js 中应该声明如下 function

<script>
// 有参无返回值
    function funcParam(param){
        alert(param+"");
    }

    // 有参有返回值
    function newFunc(param1,param2,param3){
        alert((param1 +  param2) + " " + param3);
        return param3;
    }
</script>

java 层调用时只需 loadUrl("Javascript:js方法名()) 即可,但是 Android 4.4 之后在调用 js 方法时可以获取返回值,写一个方法兼容一下

public static final String JS_FUNC_PREFIX = "javascript:";

public void invokeJs(String jsFunc, final ValueCallback<String> callback) {
    if (!jsFunc.startsWith(JS_FUNC_PREFIX)) {
        jsFunc = JS_FUNC_PREFIX + jsFunc;
    }
    // api 19
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        mWebView.evaluateJavascript(jsFunc, callback);
    } else {
        mWebView.loadUrl(jsFunc);
    }
}

在与 js 进行参数传递时,基本数据类型可以直接传递,字符串类型要使用引号包含,而且直接拼接字符串不太好,因此写一个简化构建 js 方法,自动按顺序进行参数的拼接。

// 创建一个 js 方法
public static String generateJsFunc(String funcName, Object... params) {
    StringBuilder sb = new StringBuilder(funcName).append("(");
    for (int i = 0; i < params.length; i++) {
        if (params[i] != null) {
            if (params[i] instanceof String) {
                sb.append("'").append(params[i]).append("'");
            } else {
                sb.append(params[i]);
            }
            if (i != params.length - 1) {
                sb.append(",");
            }
        }
    }
    sb.append(")");
    return sb.toString();
}

简单调用

// 调用有参有返回值的方法
String jsFunc = JsBridge.generateJsFunc("newFunc", "str", 100, 100);
mJsBridge.invokeJs(jsFunc, new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        Log.e(TAG, "value = " + value);
    }
});

// 调用有参无返回值方法
String funcParam = JsBridge.generateJsFunc("funcParam", 100);
mJsBridge.invokeJs(funcParam, null);

拦截 Url 打开应用(支付宝)

主要原理是由于某些应用会暴露一些页面出来供别的 app 唤起,因此我们只需要拦截这种 Url,然后使用 intent 打开即可,下面以支付宝为例说明:

前端使用支付宝进行支付时,需要打开手机支付宝客户端,断点看到支付宝会加载一个 schemealipays 的url,链接中配置了支付的相关信息,客户端要做的就是拦截该 Url,使用 intent 打开支付宝。

html 加载网页之前会先走 shouldOverrideUrlLoading() 方法,此时截断不使用 webView 加载,而是使用 intent 打开,此方法不仅适用支付宝,也适用打开其他应用。

mWebView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // 如果不使用 intent 覆盖加载这个链接,就走原来
        if (!shouldOverrideIntentUrl(getContext(), url)) {
            view.loadUrl(url, Api.makeHttpHeaders(getContext()));
        }
        return true;
    }
});

public static final String ALIPAY_SCHEME = "alipays";
public static boolean shouldOverrideIntentUrl(Context context, String url) {
    Uri uri = Uri.parse(url);
    if (uri != null
            && uri.getScheme() != null
            && uri.getScheme().equals(ALIPAY_SCHEME)) {
        try {
            Intent intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
            intent.addCategory(Intent.CATEGORY_BROWSABLE);
            intent.setComponent(null);
            intent.setSelector(null);
            context.startActivity(intent);
        } catch (Exception e) {
            e.printStackTrace();
            if (e instanceof ActivityNotFoundException) {
                ToastUtil.show("未检测到支付宝客户端");
            }
            return true;
        }
        return true;
    }
    return false;
}

支持下载链接

当网页中加载一个下载的链接,如 http://xxx.apk 这种链接,会走 shouldOverrideUrlLoading() 方法,但是,它是无法加载一个网页的,结果就是没有任何反应,此时需要设置 DownloadListener,需要下载的链接会进入监听,你可以在监听中自己进行网络下载保存到文件,下面我使用直接打开浏览器的方式,更简单一些。

public static void setDefDownloadListener(final WebView webView) {
    webView.setDownloadListener(new DownloadListener() {
        @Override
        public void onDownloadStart(String url, String userAgent,
                                    String contentDisposition,
                                    String mimetype,
                                    long contentLength) {
            //去下载
            Intent intent = new Intent(Intent.ACTION_VIEW);
            String downLoadUrl = url;
            if (!downLoadUrl.contains("http://")) {
                downLoadUrl = "http://" + downLoadUrl;
            }
            intent.setData(Uri.parse(downLoadUrl));
            intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
            webView.getContext().startActivity(intent);
        }
    });
}

WebChromeClient

WebView 默认是无法弹出 alert() 的,需要设置 WebChromeClient

mWebView.setWebChromeClient(new WebChromeClient());

todo

更多内容补充中 ...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,565评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,021评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,003评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,015评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,020评论 5 370
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,856评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,178评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,824评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,264评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,788评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,913评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,535评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,130评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,102评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,334评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,298评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,622评论 2 343

推荐阅读更多精彩内容