Android WebView 加载H5页面空白问题

更新日期: 2019-05-14阅读: 3k标签: 空白

在Android开发过程中,经常需要使用WebView加载一些H5页面,但有时会出现页面加载失败的情况,今天就探讨下如何解决页面加载空白的问题:


加载 HTTPS 页面时导致的问题

通常情况下,通过WebView的loadUrl(String url)方法,可以顺利加载页面。但是,当load通过SSL加密的HTTPS页面时,如果这个页面的安全证书无法得到认证,WebView就会显示成空白页。

解决方式:通过重写WebViewClient的onReceivedSslError方法来接受所有网站的证书,忽略SSL错误。

@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
   handler.proceed();
   super.onReceivedSslError(view, handler, error);
}

Https 页面图片资源显示失败

在Android 5.0之后,WebView默认不允许Https + Http的混合使用方式,所以当Url是Https的,图片资源是Http时,导致页面加载失败。需要设置 MixedContentMode属性允许Https+Http混用。

WebSettings wetSettings = webView.getSettings();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
   wetSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}

H5页面使用dom storage api导致的页面加载问题

DOM storage 是html5提供的一种标准接口,主要将键值对存储在本地,在页面加载完毕后可以通过JavaScript来操作这些数据,但是Android 默认是没有开启这个功能的,则导致H5页面加载失败,错误日志:

[INFO:CONSOLE(186)] "Uncaught TypeError: Cannot read property 'getItem' of null"
[INFO:CONSOLE(1)] "Error:Uncaught TypeError: Cannot read property 'getItem' of null
[INFO:CONSOLE(1)] "Error:Uncaught TypeError: Cannot read property 'activeIndex' of undefined
解决方式:通过WebSettings设置开启DOM Storage功能
settings.setDomStorageEnabled(true);


作者:咻咻ing
链接:https://www.jianshu.com/p/8ef6340dc166


链接: https://fly63.com/article/detial/3325

vue框架开发出现页面空白、白屏的解决方法总汇

使用Vue-cli脚手架开发单页应用时出现页面空白的情况:1.npm run build打包页面空白,2. iOS的Safari下无法打开网页,3.升级vue2+部分手机访问出现页面空白,4.升级vue2+IP访问页面空白,5.Vue在IE下显示空白问题,6.Vue只在iOS 10出现白屏问题

如何微信小程序禁止下拉_解决小程序下拉出现空白的情况

在微信小程序中,用力往下拉动,页面顶部会出现一段空白的地方。 产品的需求不太允许这么做,会影响用户体验,查看文档发现可以使用enablePullDownRefresh这属性来实现,但是在部分ios端仍然可以下拉出现空白。那么该如何解决呢?

html页面body与div之间产生空白解决方法

在做一个页面输出时发现body与div之间出现20px左右高度的空白,尝试多种方法无解,尤其是方法1也解决不了,后来发现原来是html文件编码格式问题造成的!css初始化,解决不了,就将html文件格式保存为utf-8编码格式,即问题完美解决

彻底搞懂CSS文本、空白换行问题

本文前提:文本的父容器是块级元素。首先,我们来整理一下与换行有关的3个CSS属性:word-break该属性决定文本内容超出容器时,浏览器是否自动插入换行符。word-wrap(overflow-wrap)该属性决定浏览器是否应该在一个无法正常断开的单词内部插入换行符。

CSS使用font-size: 0去除内联元素空白间隙

我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性。同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block。这样一来,有时在页面中会出现意外的空白间隙导致页面视图与本意不符

HTML中6种空白空格

HTML提供了5种空格实体(space entity),它们拥有不同的宽度,非断行空格( )是常规空格的宽度,可运行于所有主流浏览器。其他几种空格(       ‌‍)在不同浏览器中宽度各异。

前端性能优化之白屏时间

该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念、重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践。白屏时间:即用户点击一个链接或打开浏览器输入URL地址后

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!