今天在完成一个课堂工程案列时,发现了一些问题,下面就来分享一下。
如下图所示,这就是一个简单的使用WebView制作的浏览器项目工程,
目前来看,功能都初步实现了,并没有出现什么问题,
但是当进入学校官网的时候,我傻了,
正如你所见,整个屏幕只显示了网页的一小部分,还有一大部分则需要手动拖动网页来显示其他内容,
那百度为什么没有出现这种情况呢?这是因为百度站点能自动识别屏幕的尺寸,进而切换到适合在该屏幕显示的网页版本。
但不是所有站点都做了这种响应式设计,所以,就会出现网页显示不全的情况。
所以为了解决这个问题,我们需要在工程中添加如下代码:
//设置自适应屏幕,两者合用
web_search.getSettings().setUseWideViewPort(true); //将图片调整到适合webview的大小
web_search.getSettings().setLoadWithOverviewMode(true); // 缩放至屏幕的大小
添加代码,重新运行,我们可以发现,现在网页可以完整的在屏幕上显示了,如下图:
但是,问题又来了,网页确实是完整显示了,但是,网页中的具体内容很难看清楚了。
因此,为了解决这个问题,我们还需要在先前代码添加完成的基础上,再添加如下代码:
//缩放操作
web_search.getSettings().setSupportZoom(true); //支持缩放,默认为true。是下面代码功能实现的前提
web_search.getSettings().setBuiltInZoomControls(true); //设置内置的缩放控件。若为false,则该WebView不可缩放
web_search.getSettings().setDisplayZoomControls(true); //开启原生的缩放控件
其中,第三行代码在实体机上使用的时候可以关闭,也就是把”ture“改成”false“。
我这里是因为用的模拟器,无法实现双指缩放的操作,所以必须打开,才能实现缩放操作测试。
下图为代码添加完成并运行后的截图:
至此,网页显示不全的问题就解决了。
但,在此之后,我又发现了一个问题,
当我访问爱奇艺官网的时候,出现了图片加载不出来的情况,如下图:
我一开始是以为是爱奇艺或者模拟器网络环境问题,于是换成腾讯视频,但还是一样的问题,如下图:
又百度了好久,才找出问题所在。
原来,从Android5.0开始,WebView默认不支持同时加载Https和Http混合模式。
当WebView加载的链接为Https开头时,链接里面的内容,比如图片却为Http链接,这时候,图片就会加载不出来,所以就会出现网页加载出来了,但是内容不能加载出来的情况。
因此,从Android5.0以后,当一个安全的站点(https)去加载一个非安全的站点(http)时,需要根据实际情况,自行配置Webview加载内容的模式。
安卓提供了以下三种模式:
- MIXED_CONTENT_NEVER_ALLOW:
Webview不允许一个安全的站点(https)去加载非安全的站点内容(http),比如,https网页内容的图片是http链接。官方是建议App使用这种模式,因为这样更安全。 - MIXED_CONTENT_ALWAYS_ALLOW:
在这种模式下,WebView是可以在一个安全的站点(Https)里加载非安全的站点内容(Http)。这是WebView最不安全的操作模式,尽可能地不要使用这种模式。 - MIXED_CONTENT_COMPATIBILITY_MODE:
在这种模式下,当涉及到混合式内容时,WebView会尝试去兼容最新Web浏览器的风格。一些不安全的内容(Http)可以被加载到一个安全的站点上(Https),而其他类型的内容将会被阻塞。这些内容的类型是被允许加载还是被阻塞可能会随着版本的不同而改变,并没有明确的定义。这种模式主要用于在App里面不能控制内容的渲染,但是又希望在一个安全的环境下运行。
前面说过,从Android5.0开始,WebView默认不支持同时加载Https和Http混合模式。也就是说,在Android5.0往后,默认是使用的MIXED_CONTENT_NEVER_ALLOW模式,即总是不允许WebView同时加载Https和Http。
虽然官网给出的建议是,出于安全考虑,默认都使用MIXED_CONTENT_NEVER_ALLOW模式,但在实际场景中,可能服务提供商的服务器已经升级到Https,但由于页面中的一些资源是第三方提供的,可能还是http链接,所以我们只能用代码将其重新设置为MIXED_CONTENT_ALWAYS_ALLOW模式。
下面为解决办法,我们继续添加代码:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
web_search.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
这里也可以直接添加web_search.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
而添加if条件,是为了判断安卓版本,代码中的”LOLLIPOP“是棒棒糖的意思,也就是安卓5.0的代号。
添加完成,运行程序,就可以看到,网页中的图片,成功加载出来了,如下图:
最后,我也试着改成MIXED_CONTENT_COMPATIBILITY_MODE模式,也是可以的。正因如此,咱就是说,咱是更不知道这模式和MIXED_CONTENT_ALWAYS_ALLOW模式,到底有啥本质区别。综上,反正我的app也不上架,所以也就不怕被下架,索性我还是直接用了第一种模式,毕竟第一种模式https和http通吃。
对了,最后的最后,我又发现,这爱奇艺的视频,只会一直全力加载,无法播放,。。。。如图:

或者,你也可以去本站永久合作伙伴 百度 进行自我解救。。。
微信扫描下方的二维码阅读本文
暂无评论内容