WebView 加载html

WebView是我们项目中经常用到的，用来展示一些信息。一般情况，都是后台直接返回一个url我们直接加载就可以了。
有朋友向我吐槽，他们的后台直接返回html，还需要处理图片显示的问题。
下面我就把WebView加载html片段做一下简单的记录。

布局文件

布局文件比较简单，一个ScrollView嵌套了一个WebView。当然我们用了自定义的ScrollView主要是为了解决滑动冲突的问题。

loadData()和loadDataWithBaseUrl()加载html片段

public void loadData(String data, String mimeType, String encoding)

public void loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)

loadDataWithBaseURL()比loadData()多两个参数，可以指定HTML代码片段中相关资源的相对根路径，也可以指定历史Url，两个方法的其余三个参数相同。
两种都可以用来显示html标签，但是loadData()会出现网页加载不完美，图片加载不出来等情况。因为loadData()中的html data中不能包含'#', '%', '', '?'四中特殊字符，出现这种字符就会出现解析错误。所以使用loadDataWithBaseURL()来加载就可以了。

图片宽度超过屏幕

html中有些图片尺寸是不固定的，造成宽度超过了屏幕。
解决方案就是方法把 img 标签width全部替换为100%

mWebView.getSettings().setJavaScriptEnabled(true);
String varjs = "";//将img标签属性定死的js代码
data = data.replaceAll("width=\"\\d+\"", "width=\"100%\"").replaceAll("height=\"\\d+\"", "height=\"auto\"");
mWebView.loadDataWithBaseURL(null,data, "text/html", "utf-8", null);
//mWebView.loadDataWithBaseURL(null,varjs+data, "text/html", "utf-8", null);//img标签属性定死执行的加载代码

如果hmtl标签中图像没用定义宽高，使用默认尺寸的话，要适应屏幕就需要使用js代码将img标签属性定死。

点击查看大图

思路是加载网页时获取到图片，给图片设置点击事件，传入到图片浏览界面。详细查看上一篇博客

WebView 点击查看大图https://www.jianshu.com/p/3f33d3458c76

上边提到ScrollView嵌套WebView造成滑动冲突问题

-------通过自定义ScrollView解决滑动冲突

代码如下：

public class CustomScrollView extends ScrollView{
    private GestureDetector mGestureDetector;
    OnTouchListener mGestureListener;

    public CustomScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mGestureDetector = new GestureDetector(new YScrollDetector());
        setFadingEdgeLength(0);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return super.onInterceptTouchEvent(ev) && mGestureDetector.onTouchEvent(ev);
    }

    // 如果水平滑动返回false
    class YScrollDetector extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
            if(Math.abs(distanceY) > Math.abs(distanceX)) {
                return true;
            }
            return false;
        }
    }
}

如果图片链接是https开头造成图片不显示

解决方案

在webview加载页面之前，设置加载模式为：

MIXED_CONTENT_ALWAYS_ALLOW//（不太安全），
//或者
MIXED_CONTENT_COMPATIBILITY_MODE//（个人建议）。
//另外在webview设置中还可以加上另外一个设置：
websettings.setBlockNetworkImage(false);

加上混合内容模式设置，代码如下：

websettings.setBlockNetworkImage(false);//不阻塞网络图片
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    //允许混合（http，https）
    //websettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
    websettings.setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
}

通过上面的设置，发现有些图片仍然不能显示。又经过多方搜索，发现了其他问题。
图片不显示原因还有可能是证书问题。
既然用到了https，我们大部分时候都是为了网络安全问题，如果想要更好的方案，可以参考https://www.jianshu.com/p/56e2b0bf9ab2

如果我们不考虑证书安全，则可以直接这样写。

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
        handler.proceed();//接受所有网站的证书
    }
});

希望对大家有所帮助！！！