WebView深度学习（二）之全面总结WebView遇到的坑及优化

AWeiLoveAndroid

发布于 2018-09-03 16:14:23

5.9K0

发布于 2018-09-03 16:14:23

文章被收录于专栏：Flutter入门到实战

上篇文章讲到了WebView的基本使用以及Android和js的交互.

这篇文章讲一下WebView遇到的那些坑，带领各位爬坑。这里如果有你没遇到的问题，欢迎留言告诉我，我尽我所能帮你解决。感谢大家支持。

⇒ 三、WebView的那些坑

（1）为什么Webview打开一个页面，播放一段音乐，退出Activity时音乐还在后台播放？

◆◆ 解决方案 1：

//销毁Webview
@Override
protected void onDestroy() {
    if (mWebview != null) {
        mWebview.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
        mWebview.clearHistory();
        ((ViewGroup) mWebview.getParent()).removeView(mWebview);
        mWebview.destroy();
        mWebview = null;
    }
    super.onDestroy();
}

还有别问我为什么要移除，等你Error: WebView.destroy() called while still attached!之后你就知道了。

◆◆ 解决方案 2：

@Override
protected void onPause() {
   h5_webview.onPause();
   h5_webview.pauseTimers();
   super.onPause();
}
@Override
protected void onResume() {
   h5_webview.onResume();
   h5_webview.resumeTimers();
   super.onResume();
}

Webview的onPause()方法官网是这么解释的：

   Does a best-effort attempt to pause any processing that can be paused safely, such as animations
and geolocation. Note that this call does not pause JavaScript. To pause JavaScript globally, use 
pauseTimers(). To resume WebView, call onResume().  
【翻译：】通知内核尝试停止所有处理，如动画和地理位置，但是不能停止Js，如果想全局停止Js，
可以调用pauseTimers()全局停止Js，调用onResume()恢复。

（2）怎么用网页的标题来设置自己的标题栏？

◆◆ 解决方案：

WebChromeClient mWebChromeClient = new WebChromeClient() {    
    @Override    
    public void onReceivedTitle(WebView view, String title) {    
        super.onReceivedTitle(view, title);    
        txtTitle.setText(title);    
    }    
};  
mWedView.setWebChromeClient(mWebChromeClient());

★★ 注意事项：

●   1.可能当前页面没有标题，获取到的是null，那么你可以在跳转到该Activity的时候自己带一个标题，或者有一个默认标题。
●   2.在一些机型上面，Webview.goBack()后，这个方法不一定会调用，所以标题还是之前页面的标题。那么
你就需要用一个ArrayList来保持加载过的url,一个HashMap保存url及对应的title.然后就是用WebView.canGoBack()来做判断处理了。

（3）为什么打包之后JS调用失败（或者WebView与JavaScript相互调用时，如果是debug没有配置混淆时，调用时没问题的，但是当设置混淆后发现无法正常调用了）？

◆◆ 解决方案：在proguard-rules.pro中添加混淆。

-keepattributes *Annotation*  
-keepattributes *JavascriptInterface*
-keep public class org.mq.study.webview.DemoJavaScriptInterface{
   public <methods>;
}
#假如是内部类，混淆如下：
-keepattributes *JavascriptInterface*
-keep public class org.mq.study.webview.webview.DemoJavaScriptInterface$InnerClass{
    public <methods>;
}

其中org.mq.study.webview.DemoJavaScriptInterface 是不需要混淆的类名

（4） 5.0 以后的WebView加载的链接为Https开头，但是链接里面的内容，比如图片为Http链接，这时候，图片就会加载不出来，怎么解决？

★★ 原因分析：原因是Android 5.0上Webview默认不允许加载Http与Https混合内容：

◆◆ 解决方案：

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
    //两者都可以
    webSetting.setMixedContentMode(webSetting.getMixedContentMode());
    //mWebView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

★★ 参数说明：

●   MIXED_CONTENT_ALWAYS_ALLOW 允许从任何来源加载内容，即使起源是不安全的；
●   MIXED_CONTENT_NEVER_ALLOW 不允许Https加载Http的内容，即不允许从安全的起源去加载一个不安全的
    资源；
●   MIXED_CONTENT_COMPLTIBILITY_MODE 当涉及到混合式内容时，WebView会尝试去兼容最新Web浏览器的
    风格；

另外：在认证证书不被Android所接受的情况下，我们可以通过设置重写WebViewClient的onReceivedSslError方法在其中设置接受所有网站的证书来解决，具体代码如下：

webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onReceivedSslError(WebView view,
                SslErrorHandler handler, SslError error) {
            //super.onReceivedSslError(view, handler, error);注意一定要去除这行代码，否则设置无效。
            // handler.cancel();// Android默认的处理方式
            handler.proceed();// 接受所有网站的证书
            // handleMessage(Message msg);// 进行其他处理
        }
});

（5） WebView调用手机系统相册来上传图片，开发过程中发现在很多机器上无法正常唤起系统相册来选择图片。怎么解决？

★★ 原因分析：因为Google攻城狮们对setWebChromeClient的回调方法openFileChooser做了多次修改，5.0以下openFileChooser有几种重载方法，在5.0以上将回调方法该为了onShowFileChooser。

◆◆ 解决方案：为了兼容各个版本，我们需要对openFileChooser()进行重载，同时针对5.0及以上重写onShowFileChooser()方法：

上一段示例代码，给大家看看：

public class MainActivity extends AppCompatActivity {

private ValueCallback<Uri> uploadMessage;
private ValueCallback<Uri[]> uploadMessageAboveL;
private final static int FILE_CHOOSER_RESULT_CODE = 10000;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    WebView webview = (WebView) findViewById(R.id.web_view);
    assert webview != null;
    WebSettings settings = webview.getSettings();
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    settings.setJavaScriptEnabled(true);
    webview.setWebChromeClient(new WebChromeClient() {

        //  android 3.0以下：用的这个方法
        public void openFileChooser(ValueCallback<Uri> valueCallback) {
            uploadMessage = valueCallback;
            openImageChooserActivity();
        }

        // android 3.0以上，android4.0以下：用的这个方法
        public void openFileChooser(ValueCallback valueCallback, String acceptType) {
            uploadMessage = valueCallback;
            openImageChooserActivity();
        }

        //android 4.0 - android 4.3  安卓4.4.4也用的这个方法
        public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, 
                        String capture) {
            uploadMessage = valueCallback;
            openImageChooserActivity();
        }

        //android4.4 无方法。。。

        // Android 5.0及以上用的这个方法
        @Override
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> 
                 filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
            uploadMessageAboveL = filePathCallback;
            openImageChooserActivity();
            return true;
        }
    });
    String targetUrl = "file:///android_asset/up.html";
    webview.loadUrl(targetUrl);
}

private void openImageChooserActivity() {
    Intent i = new Intent(Intent.ACTION_GET_CONTENT);
    i.addCategory(Intent.CATEGORY_OPENABLE);
    i.setType("image/*");
    startActivityForResult(Intent.createChooser(i, "Image Chooser"),
                  FILE_CHOOSER_RESULT_CODE);
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == FILE_CHOOSER_RESULT_CODE) {
        if (null == uploadMessage && null == uploadMessageAboveL) return;
        Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
        if (uploadMessageAboveL != null) {
            onActivityResultAboveL(requestCode, resultCode, data);
        } else if (uploadMessage != null) {
            uploadMessage.onReceiveValue(result);
            uploadMessage = null;
        }
    }
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void onActivityResultAboveL(int requestCode, int resultCode, Intent intent) {
    if (requestCode != FILE_CHOOSER_RESULT_CODE || uploadMessageAboveL == null)
        return;
    Uri[] results = null;
    if (resultCode == Activity.RESULT_OK) {
        if (intent != null) {
            String dataString = intent.getDataString();
            ClipData clipData = intent.getClipData();
            if (clipData != null) {
                results = new Uri[clipData.getItemCount()];
                for (int i = 0; i < clipData.getItemCount(); i++) {
                    ClipData.Item item = clipData.getItemAt(i);
                    results[i] = item.getUri();
                }
            }
            if (dataString != null)
                results = new Uri[]{Uri.parse(dataString)};
        }
    }
    uploadMessageAboveL.onReceiveValue(results);
    uploadMessageAboveL = null;
}

}

重点坑：针对Android4.4，系统把openFileChooser方法去掉了，怎么解决？

详情请见博客 http://blog.csdn.net/xiexie758/article/details/52446937 我这里就不多说了。

（6） WebView调用手机系统相册来上传图片，处理好第六点说的方法，我们打好release包测试的时候却又发现还是没法选择图片了。怎么解决？

★★ 原因分析：无奈去翻WebChromeClient的源码，发现openFileChooser()是系统API，我们的release包是开启了混淆的，所以在打包的时候混淆了openFileChooser()，这就导致无法回调openFileChooser()了。

◆◆ 解决方案也很简单，直接不混淆openFileChooser()就好了。

-keepclassmembers class * extends android.webkit.WebChromeClient{
   public void openFileChooser(...);
}

（7）怎么在 WebView 中长按保存图片？

1. 给 WebView添加监听

mWebview.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(View v) {
    }
});

2. 获取点击的图片地址

先获取类型，根据相应的类型来处理对应的数据。

//首先判断点击的类型
WebView.HitTestResult result = ((WebView) v).getHitTestResult();
int type = result.getType();

//获取具体信息，图片这里就是图片地址
String imgurl = result.getExtra();

type有这几种类型：

WebView.HitTestResult.UNKNOWN_TYPE 未知类型
WebView.HitTestResult.PHONE_TYPE 电话类型
WebView.HitTestResult.EMAIL_TYPE 电子邮件类型
WebView.HitTestResult.GEO_TYPE 地图类型
WebView.HitTestResult.SRC_ANCHOR_TYPE 超链接类型
WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE 带有链接的图片类型
WebView.HitTestResult.IMAGE_TYPE 单纯的图片类型
WebView.HitTestResult.EDIT_TEXT_TYPE 选中的文字类型

3. 操作图片

你可以弹出保存图片，或者点击之后跳转到显示图片的页面。

最后整理一下代码：

mWebView.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(View v) {
        WebView.HitTestResult result = ((WebView)v).getHitTestResult();
        if (null == result)
            return false;
        int type = result.getType();
        if (type == WebView.HitTestResult.UNKNOWN_TYPE)
            return false;

        // 这里可以拦截很多类型，我们只处理图片类型就可以了
        switch (type) {
            case WebView.HitTestResult.PHONE_TYPE: // 处理拨号
                break;
            case WebView.HitTestResult.EMAIL_TYPE: // 处理Email
                break;
            case WebView.HitTestResult.GEO_TYPE: // 地图类型
                break;
            case WebView.HitTestResult.SRC_ANCHOR_TYPE: // 超链接
                break;
            case WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE:
                break;
            case WebView.HitTestResult.IMAGE_TYPE: // 处理长按图片的菜单项
                // 获取图片的路径
                String saveImgUrl = result.getExtra();

                // 跳转到图片详情页，显示图片
                Intent i = new Intent(MainActivity.this, ImageActivity.class);
                i.putExtra("imgUrl", saveImgUrl);
                startActivity(i);
                break;
            default:
                break;
        }
    }
});

（8） WebView 开启硬件加速导致的问题？

WebView有很多问题，比如：不能打开pdf，播放视屏也只能打开硬件加速才能支持，在某些机型上会崩溃。

下面看一下硬件加速， 硬件加速 分为四个级别：

Application级别

     <application android:hardwareAccelerated="true"...>

Activity级别

     <activity android:hardwareAccelerated="true"...>

window级别（目前为止，Android还不支持在Window级别关闭硬件加速。）

    getWindow().setFlags(
         WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
         WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

View级别

     view.setLayerType(View.LAYER_TYPE_HARDWARE, null);

WebView开启硬件加速导致屏幕花屏问题的解决：

★★ 原因分析：

4.0以上的系统我们开启硬件加速后，WebView渲染页面更加快速，拖动也更加顺滑。但有个副作用就是，当WebView视图被整体遮住一块，然后突然恢复时（比如使用SlideMenu将WebView从侧边滑出来时），这个过渡期会出现白块同时界面闪烁。

◆◆ 解决方案：

在过渡期前将WebView的硬件加速临时关闭，过渡期后再开启，代码如下：

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
        webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

Android 4.0+ 版本中的EditText字符重叠问题：

做的软件，在一些机器上，打字的时候，EditText中的内容会出现重叠，而大部分机器没有，所以感觉不是代码的问题，一直没有头绪。

出现原因：JellyBean的硬件加速bug，在此我们关掉硬件加速即可。

解决方案：在EditText中加入一句：

android:layerType=”software”

图片无法显示：

做的程序里有的时候会需要加载大图，但是硬件加速中 OpenGL对于内存是有限制的。如果遇到了这个限制，LogCat只会报一个Warning: Bitmap too large to be uploaded into a texture (587x7696, max=2048x2048)

这时我们就需要把硬件加速关闭了。

但开始我是这样处理的，我关闭了整个应用的硬件加速：

<application  
    android:allowBackup="true"  
    android:icon="@drawable/ic_launcher"  
    android:hardwareAccelerated="false"  
    android:label="@string/app_name"  
    android:theme="@style/AppTheme" >

随后我就发现，虽然图片可以显示了，但是ListView和WebView等控件显得特别的卡，这说明硬件加速对于程序的性能提升是很明显的。所以我就改为对于Activity的关闭。

<activity  
    android:name="icyfox.webviewimagezoomertest.MainActivity"  
    android:label="@string/app_name"  
    android:hardwareAccelerated="false"

（9） ViewPager里非首屏WebView点击事件不响应是什么原因？

如果你的多个WebView是放在ViewPager里一个个加载出来的，那么就会遇到这样的问题。ViewPager首屏WebView的创建是在前台，点击时没有问题；而其他非首屏的WebView是在后台创建，滑动到它后点击页面会出现如下错误日志：

20955-20968/xx.xxx.xxx E/webcoreglue﹕ Should not happen: no rect-based-test nodes found

◆◆ 解决方案：

这个问题的办法是继承WebView类，在子类覆盖onTouchEvent方法，填入如下代码：

@Override
public boolean onTouchEvent(MotionEvent ev) {
    if (ev.getAction() == MotionEvent.ACTION_DOWN) {
        onScrollChanged(getScrollX(), getScrollY(), getScrollX(), getScrollY());
    }
    return super.onTouchEvent(ev);
}

（10） WebView白屏是什么原因？

◆◆ 解决方案：

WebView设置setLayerType(View.LAYER_TYPE_SOFTWARE,null); 示例代码如此下：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
    setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

◆◆ 相关源码分析：

WebView继承View，View中有三种layer type分别为LAYER_TYPE_NONE，LAYER_TYPE_SOFTWARE，LAYER_TYPE_HARDWARE。

1.LAYER_TYPE_NONE：表明视图没有多余渲染层。
2.LAYER_TYPE_SOFTWARE：表明视图有一个软件渲染层。无论是否开启硬件加速，都会有一张 Bitmap（software layer），并在上面对 WebView 进行渲染。 好处：在进行动画，使用software可以只画一次ViewTree，很省。 不适合使用场景：View树经常更新时不要用。尤其是在硬件加速打开时，每次更新消耗的时间更多。因为渲染完这张Bitmap后还需要再把这张Bitmap渲染到hardware layer上面去。
LAYER_TYPE_HARDWARE：表明视图有一个硬件渲染层。硬件加速关闭时，作用同software。硬件加速打开时会在FBO（Framebuffer Object）上做渲染，在进行动画时，View树也只需要画一次。

◆◆ LAYER_TYPE_SOFTWARE 和 LAYER_TYPE_HARDWARE的区别：

1.前者是渲染到Bitmap，后者是渲染到FB上。
2.hardware可能会有一些操作不支持（出现白屏）。

◆◆ LAYER_TYPE_SOFTWARE 和 LAYER_TYPE_HARDWARE的相同：

都是开了一个buffer，把View画到这个buffer上面去。

（11）给GLSurfaceView设置为software或者hardware后，发现没有画面了是什么原因？

◆◆ 问题分析：GLSurfaceView和WebView默认LayerType都是NONE。

◆◆ 解决方案：给GLSurfaceView的LayerType设置为LAYER_TYPE_NONE就可以了。

（12） WebView的缓存机制，比如token cookie session之类的在下一篇会讲到，希望大家去看看

⇒ 四、安卓8.0关于WebView的新特性

WebView新增了一些非常有用的API，可以使用和chrome浏览器类似的API来实现对恶意网站的检测来保护web浏览的安全性，为此需要在manifest中添加如下meta-data标签：

<manifest>
<meta-data
    android:name="android.webkit.WebView.EnableSafeBrowing"
    android:value="true" />
<!-- ... -->
</manifest>

WebView还增加了关于多进程的API，可以使用多进程来增强安全性和健壮性，如果render进程崩溃了，你还可以使用Termination Handler API来检测到崩溃并做出相应处理。

⇒ 五、关于WebView的一点小优化：

（1）给WebView加一个加载进度条

用Webview加载一个网页时，如果加载时间长，界面会一直空白，体验不太好，所以加个进度条更好看一下，主流APP也都有进度条效果，大概思路我来说一下：

首先自定义一个HorizontalProgressView继承View，然后自定义一个MyWebView继承WebView，然后初始化的时候通过addView方法把前面自定义HorizontalProgressView，然后在MyWebView里面写一个内部类继承WebChromeClient，大致代码如下：

private class MyWebCromeClient extends WebChromeClient {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        if (newProgress == 100) {
            //加载完毕进度条消失
            progressView.setVisibility(View.GONE);
        } else {
            //更新进度
            progressView.setProgress(newProgress);
        }
        super.onProgressChanged(view, newProgress);
    }
}

主要是通过MyWebCromeClient 的onProgressChanged方法里面的进度值调用

progressView.setProgress()方法去更新进度条，当加载100%的时候让进度条消失。

具体实现你们自己去处理吧。

（2）加快HTML网页加载完成的速度，等页面finish再加载图片

默认情况html代码下载到WebView后，webkit开始解析网页各个节点，发现有外部样式文件或者外部脚本文件时，会异步发起网络请求下载文件，但如果在这之前也有解析到image节点，那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下，过多的网络请求就会造成带宽紧张，影响到css或js文件加载完成的时间，造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片，等页面finish后再发起图片加载。

◆◆ 解决办法：

在WebView初始化时设置如下代码：

public void int () {
    if(Build.VERSION.SDK_INT >= 19) {
        webView.getSettings().setLoadsImagesAutomatically(true);
    } else {
        webView.getSettings().setLoadsImagesAutomatically(false);
    }
}

同时在WebView的WebViewClient实例中的onPageFinished()方法添加如下代码：

@Override
public void onPageFinished(WebView view, String url) {
    if(!webView.getSettings().getLoadsImagesAutomatically()) {
        webView.getSettings().setLoadsImagesAutomatically(true);
    }
}

（3）自定义WebView页面加载出错界面

当WebView加载页面出错时（一般为404 NOT FOUND），安卓WebView会默认显示一个卖萌的出错界面。但我们怎么能让用户发现原来我使用的是网页应用呢，我们期望的是用户在网页上得到是如原生般应用的体验，那就先要从干掉这个默认出错页面开始。当WebView加载出错时，我们会在WebViewClient实例中的onReceivedError()方法接收到错误，我们就在这里做些手脚：

@Override
public void onReceivedError (WebView view, int errorCode, String description, String failingUrl) {
    super.onReceivedError(view, errorCode, description, failingUrl);
    loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
    mErrorFrame.setVisibility(View.VISIBLE);
}

从上面可以看出，我们先使用loadDataWithBaseURL清除掉默认错误页内容，再让我们自定义的View得到显示（mErrorFrame为蒙在WebView之上的一个LinearLayout布局，默认为View.GONE）。

（4）怎么知道WebView是否已经滚动到页面底端？

◆◆ 解决方案：

方案1，使用原生WebView的api可以获取到：

    if (mWebView.getContentHeight() * mWebView.getScale()  == (mWebView.getHeight() + 
    mWebView.getScrollY())) {
        //说明已经到底了
    }

方案2，继承WebView，重写onScrollChanged方法：我们在做上拉加载下一页这样的功能时，也需要知道当前页面滚动条所处的状态，如果快到底部，则要发起网络请求数据更新网页。同样继承WebView类，在子类覆盖onScrollChanged方法。以下代码中mCurrContentHeight用于记录上次触发时的网页高度，用来防止在网页总高度未发生变化而目标区域发生连续滚动时会多次触发TODO，mThreshold是一个阈值，当页面底部距离滚动条底部的高度差<=这个值时会触发TODO里面的代码。

具体如下：

@Override
protected void onScrollChanged(int newX, int newY, int oldX, int oldY) {
    super.onScrollChanged(newX, newY, oldX, oldY);
    if (newY != oldY) {
        float contentHeight = getContentHeight() * getScale();
        // 当前内容高度下从未触发过, 浏览器存在滚动条且滑动到将抵底部位置
        if (mCurrContentHeight != contentHeight && newY > 0 && contentHeight <= newY + getHeight() + mThreshold) {
            // TODO Something...
            mCurrContentHeight = contentHeight;
        }
    }
}

★★ 相关API介绍：

●   getContentHeight() @return the height of the HTML content
●   getScale() @return the current scale
●   getHeight() @return The height of your view
●   getScrollY() @return The top edge of the displayed part of your view, in pixels.

（5）怎么知道WebView是否存在滚动条？

当我们做类似上拉加载下一页这样的功能的时候，页面初始的时候需要知道当前WebView是否存在纵向滚动条，如果有则不加载下一页，如果没有则加载下一页直到其出现纵向滚动条。

首先继承WebView类，在子类添加下面的代码：

public boolean existVerticalScrollbar () {
    return computeVerticalScrollRange() > computeVerticalScrollExtent();
}

computeVerticalScrollRange得到的是可滑动的最大高度，computeVerticalScrollExtent得到的是滚动把手自身的高，当不存在滚动条时，两者的值是相等的。当有滚动条时前者一定是大于后者的。

其实也有一些替代WebView的库，比如腾讯的TBS 腾讯浏览服务，比如WebViewJavascriptBridge等方式，有兴趣的可以去了解一下，个人建议还是用原生的WebView比较好，不能动不动就用框架，框架也不一定适用于自己项目，所以我们可以看看这些框架它的使用原理，吸收框架的精华，自己去灵活封装一下用在自己项目中。

下一篇我们讲解 WebView的内存泄漏、漏洞以及缓存机制原理和解决方案----

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.01.09 ，如有侵权请联系 cloudcommunity@tencent.com 删除

深度学习