iOS中WKWebView白屏问题的分析与解决

前言

随着WKWebView的推出, 解决了很多UIWebView 的问题。比如加载速度慢,内存泄露等问题。WKWebView是在iOS 8 推出,前段时间正好把项目也适配到iOS 8 以上了,终于可以把项目中的UIWebView 替换成WKWebView。

WKWebView的特点:

  • 性能高,稳定性好,占用的内存比较小,
  • 支持JS交互
  • 支持HTML5 新特性
  • 可以添加进度条(然并卵,不好用,还是习惯第三方的)。
  • 支持内建手势,
  • 据说高达60fps的刷新频率(不卡)

但是发现在使用的时候还是有很多坑,这其中就有屡见不鲜的白屏问题。经过一些调试、google 发现不外乎这3个原因。下面话不多说了,来一起看看详细的介绍吧。

1. iOS 8.0 - iOS 8.2 偶尔白屏问题

这个是WKWebView 刚推出时的Bug,偶尔会出现白屏,如果想避免这种问题,只能通过版本号判断,小于8.2的系统使用UIWebView。

2. HTTPS 请求,未实现证书认证代理导致页面不加载的问题

如果是HTTPS 请求,需要在WKWebView 的 WKNavigationDelegate 中的一个代理方法 中实现获取服务器认证的逻辑,最后返回给服务端。 这个问题常常出现在客户端无法获得安全认证的时候(没有证书,或者是自建证书),比如说https://www.apple.com/cn 是默认的苹果中国的地址,但是 https://www.apple.com.cn 也是可以访问的(会自动跳转到 https://www.apple.com/cn ) ,只是在Safari 的安全认证中通不过,我们需要在代理方法中通过服务端给的验证方式创建一个凭证,然后继续申请访问。比如在Safari 浏览器中第一次访问时就会弹出对话框,点击继续后就可以继续访问。

通过实现以下代理即可解决

func webView(webView: WKWebView, didReceiveAuthenticationChallenge challenge: NSURLAuthenticationChallenge, completionHandler: (NSURLSessionAuthChallengeDisposition, NSURLCredential?) -> Void) {
  // 判断服务器采用的验证方法
 if challenge.protectionSpace.authenticationMethod == NSURLAuthenticationMethodServerTrust {
  if challenge.previousFailureCount == 0 {
   // 如果没有错误的情况下 创建一个凭证,并使用证书
   let credential = NSURLCredential(forTrust: challenge.protectionSpace.serverTrust!)
   completionHandler(.UseCredential, credential)
  } else {
   // 验证失败,取消本次验证
   completionHandler(.CancelAuthenticationChallenge, nil)
  }
 } else {
  completionHandler(.CancelAuthenticationChallenge, nil)
 }
}

3. 由于滚动组件嵌套的结构,不刷新的问题

这是有个哥们遇到的问题,分析的很仔细,从发现问题,到分析WebKit 源码,最后得知是在页面滚动后没有正常的调用 WKWebView 的 _updateVisibleContentRects 方法刷新需要渲染的内容导致。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

时间: 2017-10-24

IOS 下获取 rootviewcontroller 的版本不同的问题解决办法

IOS 下获取 rootviewcontroller 的版本不同的问题解决办法 一般 原生的 [[UIApplication sharedApplication].keyWindow.rootViewController presentModalViewController:self animated:NO]; 可以 获取  系统的  rootviewcontroller 但 cocos2d-x 2.1.1 在 appcontroller.mm 内定义的 加载方法是 // Set RootVie

nuxt+axios解决前后端分离SSR的示例代码

​背景:由于后端程序猿通常对CSS .JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样式错乱的问题,并且要迎合上级一天三遍样式需求,因此决定用前后端分离.考虑到网站的推广,又必须做SEO.前端框架选择VUE,解决SSR顺便选择了nuxt.js,此为背景. 一.准备工作 1.安装nodejs 2.安装vuejs 3.安装vue-cli 4.安装nuxt 二.创建nuxt项目并配置 找一个自己喜欢的目录,作为你的worksp

iOS开发之一些实用小知识点总结

话不多说,直接进主题 一.防止UIButton,cell等重复点击 主要是快速点击button或者cell,所对应的action或者逻辑会走多次,例如:点击button或者cell调用拨打电话的方法,会弹出拨打电话框好多次:这个对用户不太友好:问了下哥们儿,他给了个宏,目前算是解决这个问题:代码如下: // 防止多次调用 #define kPreventRepeatClickTime(_seconds_) \ static BOOL shouldPrevent; \ if (shouldPrev

关于适配iOS11和iPhoneX的一些事

前言 众所周知iOS11正式版终于来了,最近也把app适配了一下,其实也不是很麻烦,来看看我做的一些操作,话不多说了,来一起看看吧. 1.UITableView.UICollectionView的变化 tableView在iOS11默认使用Self-Sizing,tableView的estimatedRowHeight.estimatedSectionHeaderHeight. estimatedSectionFooterHeight三个高度估算属性由默认的0变成了UITableViewAuto

iOS中lebel特殊字符的自动换行问题解决

前言 今天在工作被一个同事问,如果在label自动换行的时候,碰到特殊的字符串时候,我不想特殊字符串换行分开,该如何实现??? 问题图片 说一下刚看到这个问题的时候,自己的思路: 1.想将事件字符串转化成一个图片,在使用NSTextAttachment结合NSAttributedString,来将图片显示在label上面,但是百度下将将文字转化成图片,看了一下,这么长的代码,列表上面太多的回复,考虑到性能的要求,果断放弃了. 2.计算回复内容的最后一个字符的frame,在去计算时间的长度,总和来

详解iOS11关于导航栏问题

前言 iOS11导航栏除了新加入了largeTitles和searchController两个新特性,可能是加入largeTitles的原因其结构较iOS 10发生了些变化. iOS11之前导航栏的navigationBarButton则直接添加在navigationBar上面 在iOS11之后,苹果添加了新的类来管理,可以看到titleView直接加在_UINavigationBarContentView上,UIBarButtonItem则添加在_UIButtonBarStackView上面,

详解Nuxt内导航栏的两种实现方式

方式一 | 通过嵌套路由实现 在pages页面根据nuxt的路由规则,建立页面 1. 创建文件目录及文件 根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同 所以,我们的文件夹也为index,index文件夹需要一个默认的页面不然nuxt的路由规则就不能正确匹配页面 一级路由是根路由 二级路由是index,user,默认进入index路由 下面是router页面自动生成的路由 { path: "/", component: _93624e48, children: [

详解Vue底部导航栏组件

不多说直接上代码 BottomNav.vue: <template> <div class="footer"> <div v-for='(item,index) of items' :class='[item.cls,{on:index === idx}]' @click="$router.push(item.push)"> <img :src="index===idx?item.iconSelect:item.i

前端Vue项目详解--初始化及导航栏

一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your cod

详解iOS11、iPhone X、Xcode9 适配指南

更新iOS11后,发现有些地方需要做适配,整理后按照优先级分为以下三类: 单纯升级iOS11后造成的变化: Xcode9 打包后造成的变化: iPhoneX的适配 一.单纯升级iOS11后造成的变化 升级后,发现某个拥有tableView的界面错乱,组间距和contentInset错乱,因为iOS11中 UIViewController 的 automaticallyAdjustsScrollViewInsets 属性被废弃了,因此当tableView超出安全区域时,系统自动会调整SafeAre

详解IOS11新特性之larget title的实现

本文介绍了IOS11新特性之larget title的实现,分享给大家,具体如下: 大标题(larget title) 图层解析 小标题所处.jpg 这就是我们平常所见的Nav的title 大标题所处.jpg 这是IOS11新特性larget title 处于哪里.jpg 他们其实都在navigationBar这个view上,但是大标题先添加在navigationBar上的,看下图便知道了 上拉到顶部.png 只不过是小标题把大标题遮盖住了 //必须要设置navigationBar的prefer

详解ios11中estimatedRowHeight属性

相信大家都已经升级了iOS11,而且也做了相应的适配,其中对于tableView这个控件进行适配的时候,比如:集成MJRefresh的时候,当然还有其他很多情况下,很多资料都有说需要把estimatedRowHeight属性设置为0,那么它到底是什么,为什么要这么来做,我们来探究下. 什么是estimatedRowHeight? 简而言之estimatedRowHeight是一个预估高度,iOS11之前是为0,在iOS11下,这个值默认为44. 我们知道tableView是继承于ScrollVi

iPhoneX无导航栏页面适配问题解决方案

原全屏适配在iPhoneX会由于安全区域的变化导致显示不全. 解决方案如下: 在self.view上添加一个view,剩下的视图基于该view布局,view的约束随self.view.safeAreaInsets的改变需要重置: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. self.view.backgroundColor = [UIColor blac

IOS 改变导航栏返回按钮的标题实例详解

IOS 改变导航栏返回按钮的标题实例详解 前言: 下午又找到了一个新的方法 这个方法不错 暂时没有发现异常的地方. 新写的App中需要使用UINavigationController对各个页面进行导航,但由于第一级页面的title较长,在进入第二级页面后返回按钮leftButtonItem的title就会变得很长,对NavigationBar空间占用很大,而且不美观,于是使用代码对leftButtonItem的title文本进行修改,无论是设置self.navigationItem.leftBa

xcode 左边导航栏中符合含义详解

xcode 左边导航栏中符合含义详解 "M" = Locally modified    "U" = Updated in repository  "A" = Locally added    "D" = Locally deleted    "I" = Ignored  "R" = Replaced in the repository  "–" "=&qu