WebView 封装

WebView 是 Android 最复杂以及最强大的一个控件(最多坑) , 一大堆的 setting 让人摸不着头脑 , 很多时候压根不知道这个设置有什么用 ,加上 WebViewClient 和 WebChromeClient 做为内部类 , 一堆业务逻辑 , 使得 Activity 变得乱糟糟的 ,代码可读性更是糟糕透了 , 最后被逼上梁山 , 走上了封装的道路 。

WebView 封装思路

对于 WebView 的封装 , 相信很多人都是抽象在一个基类里面 , 封装成一个 BaseWebActivity , 或者 BaseWebFragment , 对于这种封装还是不能满足像我这种有洁癖有程序员的 , 因为复用性不高 , 而且容易导致 Activity 或者 Fragment 基类膨胀 。 下面向大家分享我的封装思路。

首先让大家看下我封装的效果

mAgentWeb = AgentWeb.with(this)//传入Activity
                .setAgentWebParent(mLinearLayout, new LinearLayout.LayoutParams(-1, -1))//传入AgentWeb 的父控件 ,如果父控件为 RelativeLayout , 那么第二参数需要传入 RelativeLayout.LayoutParams
                .useDefaultIndicator()// 使用默认进度条
                .defaultProgressBarColor() // 使用默认进度条颜色
                .setReceivedTitleCallback(mCallback) //设置 Web 页面的 title 回调
                .createAgentWeb()//
                .ready()
                .go("http://www.jd.com");

效果图

jd.png

上面已经封装成一个 Web 库了 , 叫 AgentWeb , 欢迎大家使用 。

可以看到里面没有一句 WebSettings , 甚至 WebChromeClient 和 WebViewClient 都不用配置 , 使用的是简洁链式调用 。

AgentWeb 封装思路是通过代理 , 将 WebView 从 Activity 或者 Fragment 中代理出来 , 不再需要 Activity 或者 Fragment 内部创建和管理 ,Activity 管理 WebView 需要通过 AgentWeb , 下面通过 UML 图来简单说明下 .

BaseActivity 封装使用的 UML 关系图

common_.png

AgentWeb 封装使用的 UML 关系图

agentweb结构.png

BaseWebActivity 直接组合 WebView , 这样做为什么说复用性不高呢 ? 主要还是因为 WebView 依附在 BaseWebActivity 身上 ,要别人直接继承你的 Activity 是很不好的 ,因为 Java 的单继承关系 , 使得使用基类的灵活性受到很大的约束 , 这也是 Effective Java 里面提到的组合优先于继承 。

AgentWeb 则不同 , AgentWeb 是一个独立的库 , 可以让你很方便一句话就引入 , 不需要依赖 BaseWebActivity , 就像上面一样简简单单一句话引入即可。

AgentWeb 把 WebView 代理出来 , 将功能细分成一个类去管理 , 比如说的 WebCreator 负责创建 WebView 以及 进度条 、WebSettings 则是对 WebView 进行统一设置 , JsEntraceAccess 是对 Javascript 方法访问进行统一入口 , 这样做使得每一个功能独立 , 相互不影响 , 也使得 AgentWeb 的结构更清晰 , 符合单一职责原则 。 源码太多就不贴了 ,下面分享下封装 WebView 遇到的一些问题 。

WebView 封装的一些问题与解决思路

WebView 的封装可谓真是一波三折啊 , WebView 实在太多坑了 , 比如说 常见的泄露 , Js 安全 ,低版本跨源问题 , Context 引致的 onJsAlert 失效 ,Android 4.4 不支持文件选择问题等等。

内存泄露

这个问题在低版本不好解决就算类似下面代码通过反射制空 sConfigCallback 该字段, 还是有些手机会出现泄露 ,对于该问题 ,唯一有效方案解决在 AndroidManifest 里面为 Web Activity 添加 android:process=":web" 属性 , 然后在 该 Activity onDestroy 里面 执行 System.exit(0); 下面可以解决一部分泄露

                Field field = WebView.class.getDeclaredField("mWebViewCore");
                field = field.getType().getDeclaredField("mBrowserFrame");
                field = field.getType().getDeclaredField("sConfigCallback");
                field.setAccessible(true);
                field.set(null, null);      

addJavascriptInterface API 引起的远程代码执行漏洞

对于这个问题 ,我相信大家或多或少都有点了解 ,问题是由注入类引起 ,从注入类中找到 Runtime 对象 ,可以通过 Runtime 执行 shell 命令 。 Google 只针对 Android 4.2.2 版本及以上版本给出了解决方法 ,为了解决兼容 4.2.2 以下版本这个问题 AgentWeb 采用 360 大牛给出的方案 , 向 Web 页面注入一段 Js 脚本 ,然后通过脚本弹 Prompt 向 Java 通信 ,解决了 4.2.2 以下版本 addJavascriptInterface 安全通信问题 。 下面给出大致实现

比如下面注入类

public class AndroidInterface {   
    public void callAndroid(final String msg) {
            Log.i("Info",""+msg);
    }
}
 mAgentWebView.addJavascriptInterface("android",new AndroidInterface()); //注意 mAgentWebView 是 WebView 子类 , 并重写了 addJavascriptInterface 方法 。

低于 Android 4.2.2 的版本上面的注入对象会经过包装拼接成如下脚本 。

注入的脚本

.....省略N多 Js 代码
android.callAndroid = function() {
        .....省略N多 Js 代码
        var m = prompt('AgentWeb: ' + JSON.stringify({method: l, types: e, args: f}));
        var g = JSON.parse(m);
        if (g.code != 200) {
            throw "Android call error, code:" + g.code + ", message:" + g.result
        }
        return g.result
    };

通过 webView.loadUrl(脚本) 注入上面的脚本 。

Js 执行下面方法

function sendHelloToAndroid() {    
        window.android.callAndroid("你好,Android! ");
  }

就会执行上面的 function 里面的方法体 ,Android 端回调onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) message 参数里面取出 js 要调的目标方法 , 然后通过反射调用该目标方法 。

对于同源跨域攻击问题

什么是同源策略吗 ? 同源策略是由 Netscape 提出来的 ,现在主流的浏览器都遵循这种策略 ,同源是一般指http://(协议)www.google.com(主机):8080 (端口) 三要素都相同 ,但实际上并不是那么严格 , 比如 IE 就会忽略对端口的判断 。

同源有什么作用吗 ?
同源的数据默认为可以安全访问的 。 比如说 url http://www.google.com:xxxx/login 登录后浏览器就会把返回来的 cookies 保存起来 , 对于 http://www.google.com:xxxx/index.html 对于这个 url 浏览器会默认为跟前者同源 , 那么这个 url 可以无缝的访问到 login 保存下来的 cookies 。

大家都知道 Android 应用之间的文件和数据一般情况下是不能相互访问的 , 但是不正确的使用 WebView ,会打破这种状况 , 比如说以下这种使用

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview);
        webView = (WebView) findViewById(R.id.webView1);
        webView.getSettings().setAllowFileAccess(true);                    
        webView.getSettings().setJavaScriptEnabled(true);                   
        webView.getSettings().setAllowFileAccessFromFileURLs(true);       
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true); 
        Intent i = getIntent();
        String url = i.getData().toString(); 
        webView.loadUrl(url);
    }

将该 Activity 设置 exported="true" , 其他应用就可以通过隐式启动 ,将 data 作为 url ,启动的该应用 , 让该应用加载脚本 ,遍历该应用内的文件或者私密文件 , 上传服务器 。

这个问题一直存在 Android 手机中 ,这个问题 Google 并没有修复它 , 只是在 4.2 后的版本把 setAllowFileAccessFromFileURLs 以及 mWebSettings.setAllowUniversalAccessFromFileURLs 设置为 false , 用户没有刻意去开启它 , 高于 Android 4.2 版本默认是安全的 。 对于该问题 AgentWeb 使用的是以下设置 。

        mWebSettings.setAllowFileAccess(true); //允许file 协议 , 加载本地文件  
        mWebSettings.setAllowFileAccessFromFileURLs(false); //禁止通过 file url 加载的文件执行 Javascript 读取其他的本地文件 .
        mWebSettings.setAllowUniversalAccessFromFileURLs(false);//禁止通过 file url 加载的文件执行 Javascript 可以访问其他的源 如  http , https 。

Context 引致的 onJsAlert 失效

这个问题根本原因在防止泄露时候创建 new WebView(activity.getApplicationContext()); 导致 , 很正常啊 , 因为你创建 WebView 传的是 Application , Application 本身是无法弹 Dialog 的 。 所以只能无反应 !这个问题解决方案只要你创建 WebView 时候传入 Activity , 或者 自己实现 onJsAlert 方法即可。

Android 4.4 文件访问

Android 4.4 WebView 内核正式有 WebKit 替换 为 Chromium 使得很多 Api 都废弃掉了 , 这是 Google 正式宣告抛弃 Webkit 的一个句号 。 所以要兼容 Android 4.4 以下的 WebView 的应用特别难受 。 回到正题 , 4.4 文件访问 , 你会发现 4.4 点击 input 标签没反应 , 瞬间一万只曹尼玛在崩腾 , 幸庆的是还有 Js 通信 ,解决方案:可以通能过 Js 访问 Java 然后打开文件选择器 , 拿到文件后 , 将文件转成 Base64 字符串回传给 Js , 因为拿到的文件路径是 Content:// 开头 JS 是无法解析的 。(这个代码跨度有点大 , 就不贴源码了 , 有兴趣可以克隆仓库看下)

WebView 封装后使用

App 下载

AgentWeb 在 Fragment 中使用

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        mAgentWeb = AgentWeb.with(this)// Fragment  传入
                .setAgentWebParent((LinearLayout) view, new LinearLayout.LayoutParams(-1, -1))// 设置 AgentWeb 的父控件 , 这里的view 是 LinearLayout , 那么需要传入 LinearLayout.LayoutParams
                .useDefaultIndicator()// 使用默认进度条
                .setReceivedTitleCallback(mCallback) //标题回调
                .setSecurityType(AgentWeb.SecurityType.strict) //注意这里开启 strict 模式 , 设备低于 4.2 情况下回把注入的 Js 全部清空掉 , 这里推荐使用 onJsPrompt 通信
                .createAgentWeb()//
                .ready()//
                .go(getUrl());
        
    }

跟原先 WebFragment 比简洁多了 。

Js 调用 。

function callByAndroid(msg1,msg2){
      console.log("callByAndroid")
  }

没有经过封装的

mWebView.loadUrl("javascript:callByAndroid("+"\"hello\""+","+"\" js\""+")");

封装后

mAgentWeb.getJsEntraceAccess().quickCallJs("callByAndroid","Hello","js");

Github

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

推荐阅读更多精彩内容