安卓 WebView 指南

一: WebView 基本配置及使用

1:WebSetting 管理 WebView 状态配置

WebSettings常用配置:

        WebSettings webSetting = this.getSettings();

        // 支持js脚本
        webSetting.setJavaScriptEnabled(true);

        // 设置是否允许 WebView 使用 File 协议 设置为true,即允许在 File 域下执行任意 JavaScript 代码 有安全问题
//        webSetting.setAllowFileAccess(true);
        // 设置 WebView 底层的布局算法 1 NARROW_COLUMNS:可能的话使所有列的宽度不超过屏幕宽度. 2 NORMAL:正常显示不做任何渲染. 3 SINGLE_COLUMN:把所有内容放大 WebView 等宽的一列中
        webSetting.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);

        //设置自适应屏幕,两者合用
        webSetting.setUseWideViewPort(true);// 将图片调整到适合 WebView 的大小
        webSetting.setLoadWithOverviewMode(true);// 缩放至屏幕的大小

        // 存储
        webSetting.setAppCacheEnabled(true);// 设置 Application 缓存 API 是否开启 setAppCachePath
        webSetting.setAppCacheMaxSize(Long.MAX_VALUE);
        webSetting.setDatabaseEnabled(true);// 设置是否开启数据库存储 API 权限 setDatabasePath
        webSetting.setDomStorageEnabled(true);// 设置是否开启 DOM 存储 API 权限
        if(shouldCache){
            webSetting.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        }else {
            webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);
        }

        // 插件
        webSetting.setPluginsEnabled(true);
        webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);

        // 设置渲染优先级
        webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);

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

        // 启用地理定位
        webSetting.setGeolocationEnabled(true);

        // UserAgentInfo
        String defaultUA = webSetting.getUserAgentString();
        webSetting.setUserAgentString(getAgent(defaultUA));

        webSetting.setDefaultTextEncodingName("UTF-8");// 设置编码格式
        webSetting.setTextSize(WebSettings.TextSize.NORMAL);

        // 缩放操作
        webSetting.setSupportZoom(true); // 支持缩放,默认为true。是下面那个的前提。
        webSetting.setBuiltInZoomControls(true); // 设置内置的缩放控件。若为false,则该WebView不可缩放
        webSetting.setDisplayZoomControls(false); // 隐藏 WebView 缩放按钮

//        webSetting.setSupportMultipleWindows(true); //打开新窗口

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            // 允许从 http 加载资源
            webSetting.setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        
        // 自动加载图片
        webSettings.setLoadsImagesAutomatically(true);

2:WebViewClient 处理 WebView 的各种事件、回调

// 加载页面资源时会回调,每一个资源产生的一次网络加载,除非本地有当前缓存
public void onLoadResource(WebView view, String url)
// 开始加载页面时回调,一次Frame加载对应一次回调
public void onPageStarted(WebView view, String url, Bitmap favicon)
// 完成加载页面时回调,一次Frame加载对应一次回调
public void onPageFinished(WebView view, String url)
// 是否在 WebView 内加载页面
public boolean shouldOverrideUrlLoading(WebView view, String url)
// 可以拦截某一次的 request 来返回我们自己加载的数据
public WebResourceResponse shouldInterceptRequest
// 访问 url 出错
public void onReceivedError
// http 请求错误信息
public void onReceivedHttpError
// ssl 访问证书出错,handler.cancel()取消加载,handler.proceed()对然错误也继续加载
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error)

3:WebChromeClient 处理 WebView 对 Javascript 的对话框,网站图标,网站 title,加载进度 等

// 加载 web 进度
public void onProgressChanged(WebView view, int newProgress)
// js 调用 alert对话框
public boolean onJsAlert(WebView view, String url, String message, JsResult result)
// js 中的 Confirm 对话框
public boolean onJsConfirm
// js console
public boolean onConsoleMessage(ConsoleMessage consoleMessage)
// js Prompt对话框
public boolean onJsPrompt
// 接收 web 页面的 title
public void onReceivedTitle(WebView view, String title)

4:js/java 交互
js -> java

1:addJavascriptInterface 注入 java 对象 到 js window 下
2:shouldOverrideUrlLoading 制定url协议
3:WebChromeClient 的 console/alert/confirm/prompt 拦截 也需要定制协议

java -> js

1:loadUrl 会刷新页面
2:evaluateJavascript Android 4.4 后才可使用,有回调并不会刷新页面

5:常见问题
1:交互的安全问题addJavascriptInterface 接口会引起远程代码执行漏洞

解决方案:addJavascriptInterface 加@ 注解 并 WebView 初始化时调用 removeJavascriptInterfaces 移除系统 bridge 注入对象

@TargetApi(11)
private static final void removeJavascriptInterfaces(WebView webView) {
    try {
        if (Build.VERSION.SDK_INT >= 11 && Build.VERSION.SDK_INT < 17) {
            webView.removeJavascriptInterface("searchBoxJavaBridge_");
            webView.removeJavascriptInterface("accessibility");
            webView.removeJavascriptInterface("accessibilityTraversal");
        }
    } catch (Throwable tr) {
        tr.printStackTrace();
    }
}

2:301/302重定向问题 WebView.HitTestResult 判断是否是重定向,从而决定是否自己加载url

fun isRedirectUrl(view: WebView): Boolean {
        val hitTestResult = view.hitTestResult
        if (hitTestResult == null) {
            LogUtil.d("111", "HitTestResult null")
            return true
        }
        if (hitTestResult.type == WebView.HitTestResult.UNKNOWN_TYPE) {
            LogUtil.d("111", "HitTestResult unknow type")
            return true
        }
        return false
    }

三: WebView 源码设计(Framework层)

大致画了下类关系图,先看下 WebView Framework 层类之间的关系
image

找个入口,从 WebView 的 loadUrl 方法会调用 mWebViewCore.sendMessage 方法,发送一个 EventHub.LOAD_URL 的消息, WebViewCore 的 mHandler 收到消息并处理 -> 调用到 mBrowserFrame.loadUrl(url, extraHeaders); 在 BrowserFrame 里 loadUrl 方法,如果是 url 有字符 ‘javascript:’ 就调用 JNI 方法 stringByEvaluatingJavaScriptFromString 否则调用 nativeLoadUrl

public void loadUrl(String url, Map<String, String> extraHeaders) {        mLoadInitFromJava = true;        if (URLUtil.isJavaScriptUrl(url)) {            // strip off the scheme and evaluate the string            stringByEvaluatingJavaScriptFromString(                    url.substring("javascript:".length()));        } else {            nativeLoadUrl(url, extraHeaders);        }        mLoadInitFromJava = false;    }

之后 JNI 回调到 BrowserFrame 的 loadStarted 再调用 mCallbackProxy 对象 mCallbackProxy.onPageStarted(url, favicon); 完成 WebViewClient 的回调

综上分析:

1:WebViewCore 是承接 WebView 功能的代理类,功能的初始化在 WebCoreThread 完成

2:BrowserFrame 负责主要 Web 功能对应 C 层 WebKit::Frame 是 native 和 java 回调的工具类

3:CallbackProxy 是其他线程调用功能回调的通道,负责把收到的消息具体分发到 WebView,WebViewClient,WebChromeClient中。

native 层代码可以扫下这2个目录:

// c++ /external/webkit/WebCore/bridge/jni/jni_jsobject.mm

// jni /external/webkit/WebKit/android/jni/WebCoreJni.cpp

四:WebView 在项目中的封装

我们对一个模块进行封装前一定要设计几个小功能,对外提供 api 调用,对内模块聚合。先想了几个点,哈哈,那就试着尝试一下:

1:WebView 不能在线程初始化,但是在 Application 中初始化会耗时造成 App 启动慢 于是我们可以在 provider 里

// manifest 里
<provider
    android:name=".web.WebPreInitContentProvider"
    android:authorities="${applicationId}.preIntWeb"
    android:enabled="true"
    android:exported="false" />
// WebPreInitContentProvider 进行 WebView 初始化
class WebPreInitContentProvider : ContentProvider() {

    override fun onCreate(): Boolean {
        if(AWebProxy.isPreInitWebView()){
            val webView = AWebView(MutableContextWrapper(context))
            Log.e("AWebView","-> init")
            if(AWebProxy.getPreInitUrl().isNotEmpty()){
                webView.loadUrl(AWebProxy.getPreInitUrl())
                Log.e("AWebView","-> url = " + AWebProxy.getPreInitUrl())
            }
            WebViewPools.recycle(webView)
        }
        return true
    }

2:WebView 回收利用

// 回收池:“先进先出” 的数据结构
object WebViewPools {
    private var mWebViews: Queue<IWebView>? = null
    init {
        mWebViews = LinkedBlockingQueue()
    }
    
    fun recycle(webView: IWebView) {
        try {
            mWebViews?.offer(webView)
        } catch (e: Exception) {
            e.printStackTrace()
        }
    }

    @MainThread
    fun acquireWebView(context: Context?): WebView? {
        if(mWebViews?.size==0){
            return AWebView(context)
        }
        val poll = mWebViews?.poll()
        return try {
            poll as? WebView
        } catch (e: Exception) {
            null
        }
    }

使用:

class MyWebViewActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_my_web_view)
        // get WebView
        val webView:WebView? =  WebViewPools.acquireWebView(this)
        webView?.let {
            rootView.addView(it)
            it.loadUrl("https://www.baidu.com")
        }
    }
}

3:提供清晰的模块初始化入口

public class App extends Application {

    @Override
    protected void attachBaseContext(Context base) {
        super.attachBaseContext(base);
        
        AWebProxy.INSTANCE
                //.setWebSettings(null)
                .setPreInitUrl("https://www.baidu.com")
                .isPrintPerformance(true);
    }

有同学注意到了 attachBaseContext 初始化 是因为我们想在入口通过变量控制是否 ContentProvider里 运行初始化 WebView 及预加载 url 的代码,而 Application 的 onCreate 是慢于 Providers 的 onCreate 方法的。

我们可以看下源码 providers 的注册及 application 的绑定

// handleBindApplication
if (!data.restrictedBackupMode) {
          List<ProviderInfo> providers = data.providers;
                if (providers != null) {
                    // 注册并调用 provide 的 onCreate
                    installContentProviders(app, providers);
                    // For process that contains content providers, we want to
                   // ensure that the JIT is enabled "at some point".
                    mH.sendEmptyMessageDelayed(H.ENABLE_JIT, 10*1000);
                }
            }

            // Do this after providers, since instrumentation tests generally start their
            // test thread at this point, and we don't want that racing.
            try {
                mInstrumentation.onCreate(data.instrumentationArgs);
            }
            catch (Exception e) {
                throw new RuntimeException(
                    "Exception thrown in onCreate() of "
                   + data.instrumentationName + ": " + e.toString(), e);
            }
            try {
                   // Application 的 onCreate() 方法
                   mInstrumentation.callApplicationOnCreate(app);
            } catch (Exception e) {
                if (!mInstrumentation.onException(app, e)) {
                 throw new RuntimeException(
                    "Unable to create application " + app.getClass().getName()
                        + ": " + e.toString(), e);
               }
            }

下面是封装的模块 AWebProxy :

AWebView:

class AWebView : WebView, IWebView {

    constructor(context: Context?) : this(context, null)
    constructor(context: Context?, attributeSet: AttributeSet?) : super(context, attributeSet)
    init {
        onInit()
    }
    override fun onInit() {
        var webSettings = AWebProxy.getWebSettings()
        if (webSettings == null) {
            webSettings = CustomWebSettings()
        }
        webSettings.configWebSettings(this)
        removeJavascriptInterfaces(this)
    }

    override fun onDestroy() {}

    @TargetApi(11)
    private fun removeJavascriptInterfaces(webView: WebView) {
        try {
            webView.removeJavascriptInterface("searchBoxJavaBridge_")
            webView.removeJavascriptInterface("accessibility")
            webView.removeJavascriptInterface("accessibilityTraversal")
        } catch (tr: Throwable) {
            tr.printStackTrace()
        }
    }

    override fun drawChild(canvas: Canvas, child: View?, drawingTime: Long): Boolean {
        val ret = super.drawChild(canvas, child, drawingTime)
        Log.e("AWebView", "start show Performance")
        if (AWebProxy.isPrintPerformance()) {
            // do print on Screen
        }
        return ret
    }
}

模块接口:

interface IWebSettings{
    fun configWebSettings(webView: WebView): WebSettings?
}
interface IWebView{
    fun onInit()
    fun onDestroy()
}
interface IWebProxy{
    // 模块内部 api
    interface Inner{
        fun getWebSettings(): IWebSettings?
        fun isPrintPerformance():Boolean
        fun isPreInitWebView():Boolean
        fun getPreInitUrl():String
    }
    // 模块外部暴漏的接口
    interface Outer{
        fun setWebSettings(webSettings: IWebSettings?):Outer
        fun isPrintPerformance(isPrintPerformance: Boolean): Outer
        fun isPreInitWebView(isPreInitWebView: Boolean): Outer
        fun setPreInitUrl(url: String) :Outer
    }
}

AProxy.kt:代码

object AWebProxy : IWebProxy.Inner, IWebProxy.Outer {

    private var webSettings: IWebSettings? = null
    private var isPrintPerformance = false
    private var isPreInitWebView = false
    private var preInitUrl = ""

    init {
        // some check
    }

    override fun setWebSettings(webSettings: IWebSettings?): IWebProxy.Outer {
        this.webSettings = webSettings
        return this
    }

    override fun isPrintPerformance(isPrintPerformance: Boolean): IWebProxy.Outer {
        this.isPrintPerformance = isPrintPerformance
        return this
    }

    override fun isPreInitWebView(isPreInitWebView: Boolean): IWebProxy.Outer {
        this.isPreInitWebView = isPreInitWebView
        return this
    }

    override fun setPreInitUrl(url: String): IWebProxy.Outer {
        this.isPreInitWebView = true
        this.preInitUrl = url
        return this
    }

    override fun getWebSettings(): IWebSettings? = this.webSettings
    override fun isPrintPerformance(): Boolean = this.isPrintPerformance
    override fun isPreInitWebView(): Boolean = this.isPreInitWebView
    override fun getPreInitUrl(): String = this.preInitUrl
}

感谢,感谢 ^ ^

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

推荐阅读更多精彩内容