安卓WebView的那些坑

博主自从开始写安卓以来，一直饱受WebView的摧残，好在网上一大堆的大神给出了他们成长路上遇到的坑以及一些解决办法，才让我这个渣渣能够一往直前。但是，百度来找到问题的解决办法之路也总是崎岖坎坷，一方面可能总结的不够全面，另一方面就是版本不断升级，很多适用于4.4版本的不一定适用于5.0版本诸如此类。

大学时候写博客到如今，已是两三年没写过博客了。这段时间一直在学习安卓，工作也是安卓开发了，不断的在成长与学习，有总结一些自己的经验与方法，却懒的不肯花时间来写博客了，这样是不好滴～

写博客，不仅是对知识的回顾，能帮助到遇到同样问题的他人，还能给自己留下一份文档，不用每次都去网络上大海捞针般搜索答案。好啦，闲话少说，这篇文章纪录博主今天开始遇到的各种坑，之前遇到过解决的以及网络上一搜一大把的就不提了。

20160517更新
1、手机以及电脑浏览器均能打开，而WebView打开该网址却不显示任何东西
项目中，要显示一个URL详情，其实就是使用WebView来打开一个URL而已啦！本来都好好的，某一天，测试的过程发现该WebView在打开项目官网的时候，居然看不到任何东西！！！把官网在浏览器上打开，里面是有东西的，然后拿IOS的程序查看的时候，也是能显示的。无奈，只好慢慢调试，因为这个界面并不是全屏放WebView，而是ScrollView里面嵌套WebView，无法设置WebView的高度为match_parent，只能设置为wrap_content，其他的百度网页之类的都是很正常的，唯独公司官网的网址无法正常显示。然后仔细看了下官网的网址，发现后面加了个"/m"，原来这个官网是专门在手机上的浏览器上来显示的。把网址用手机浏览器打开发现也是很正常的，然后尝试了用单独的高度设为match_parent的界面打开这个官网也是正常的。那么问题到底是什么呢？为何ios的就可以呢？用F12查看了下官网源码，发现网页代码里面没给定高度值，而是会使用100%这样的属性，突然意识到，代码里面WebView的高度设为wrap_content，那么就是网页多高，WebView就多高了，而这个官网呢，就是WebView控件有多高，这个网站的内容就多高。然后让ios的同事看了他们的代码，发现他们设置了WebView的最低高度也是200。然后，如果设为50，则网页的高度果然只有一点点了，不设置最低高度的时候，网页也没显示出来了。OMG！跟后台同事说了情况，结果他们不愿意改...理由就是，该网站就是给手机浏览器设定的，仅仅为了app上这个界面而去改东西，他们不愿意！！！无奈咯，只好自己改安卓了，给WebView设置minHeight属性值，然并卵，没任何效果。最后怎么解决的呢？个人觉得，就算是手机版网页，也不应该这样不给高度，打开百度网站的时候也是加载的网页版了，但是也是有高度的呀...所以博主采取了下下策，在WebView的WebViewClient的onpageFinished方法里面，如果网站域名是项目官网，则设置高度为手机屏幕的高度，设置高度代码如下：

webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}

@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if (url.startsWith("XXXXXX")) { // 公司官网域名开头
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) webView.getLayoutParams();
lp.height = DensityUtil.getScreenHeight();
webView.setLayoutParams(lp);
}
}
});

然后，问题解决。当然，不知道会不会还有其他网站也写成手机版然后不给定任何高度的...所以说，该方法毕竟只是下下策了。
2、WebView打开网址右侧出现满屏的滚动条，实际上内容已经全部显示无法滚动
坑总是一个接着一个，解决完显示出来的问题，又遇到了另外一个问题，发现WebView显示项目官网的时候，右侧有一根满高度的滚动条！一顿百度怎么禁止掉WebView的滚动条，方法都试遍了还是没用，IOS、网页上根本看不到那根线！又是一阵纠结。然后拿来了公司的四个安卓测试机，发现三星手机上没那根线，而其他三个手机（魅蓝note1、小米3、HTC）上都有那根该死的线...下班回家后，又继续在家研究为什么会那样（强迫症逼死人啊！！！），在家里再次测试，魅族3和小米note没那根线，但是另一个奇酷青春版手机上会有。再次百度了一阵，无果后只好放弃。第二天到了公司，还是心塞，再次去百度去思考。这个时候思维开始清晰起来，开始好好思考问题了，而不是一顿百度然后尝试。为什么其他所有网站都正常，就那个不行呢？难道因为那个是手机版网页的问题？很有可能！然后我又寻找了一手机版的网页，发现那个却不会出现那根线，博主只好F12来查看两个网页的源码了，然后发现项目官网的body里面的属性只给了最少宽度，而另一个正常显示的网页的body属性则写的是

style="width: 100%; height: 100; overflow: hidden;"

只好无奈请后台同事将项目官网的body属性值也这样写，但是却发现还是不行。抓耳挠腮了...漫无目的的在官网源码上随意乱点，突然看到有一个div是占满整个高度的，它的属性里面有一个属性：

overflow-y: scroll;

赶紧叫后台去掉了这个属性，然后再次测试，完美= =。 我的个强迫症呦，终于安心了...这个属性值是强制显示IE的垂直滚动条的意思。只是为什么电脑网页上没显示，手机浏览器也不显示，ios也不显示，安卓手机有些显示有些不显示呢？搞不懂...

3、WebView与ScrollView的滑动冲突
你以为就完了？no！还没完！这个WebView嵌套在ScrollView里面，对WebView里面的控件的点击当然是WebView处理，而滑动，则是交给ScrollView来处理的，一切也都很正常，然后又是项目官网！！！项目官网有个介绍页，做的很炫酷，在网页里面就是，已经是全屏内容了，但是上下滚动鼠标滚轮，界面上的东西会滑动切换，但是在WebView上面滑动，就是ScrollView在滑动了...当然，有经验的人基本都知道如何解决事件冲突，让WebView的任何事件都不交给ScrollView处理就好了，代码也很简单：

webView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP)
scrollView.requestDisallowInterceptTouchEvent(false);
else
scrollView.requestDisallowInterceptTouchEvent(true);
return false;
}
});

这样的话，在WebView上操作，ScrollView就不会去滑动了，测试了下，官网的那个滑动切换效果是有了，但是，当打开的是其他网页比如百度网页的时候，在WebView上面滑动需要去滑动ScrollView的时候，ScrollView也没动静了，唉，也是心累，继续使用下下策，类似于上面要显示这个官网一样，高度设置为手机屏幕的一部分（若还是全屏，则刚好滑倒WebView占满屏幕的时候，就无法滑动ScrollView咯），同时加上上面这段让ScrollView不解决WebView上的事件的代码。

总结：感觉上面的三个坑，除了有一个是找到了原因解决了，其他两个都是项目官网造成的问题，而我的解决也只是暂时使用下下策，如果其他的网站也是和我们的官网一样这样写的，那就悲催了，不知道有没有哪位大神知道我所说的问题的完美解决办法？真心求教。