WKWebView 在 iOS8 下的坑
WKWebView属于WebKit,是 apple 在 iOS8 上给开发者提供的新的 web 内容展示控件。根据官方测试,其各项性能都比传统的 UIWebView 强上数倍。但实际使用下来,其在 iOS8 上充其量算是个半成品,完全不具备替代 UIWebView 的实力。究其原因,有以下几个方面...
背景描述
项目中需要展示包含大量数学公式的页面,经过调研,最后决定以 HTML 页面的形式展示,数学公式的渲染交给 JS 库 MathJax 来完成
-
具体方式为
本地事先写好的 HTML 模版 + 从 server 端后去所需展示的内容 + 调用同样在本地的 JavaScript 函数将数据填充置`<body>`内 + 调用从网络获取的 MathJax 函数,进行渲染
除了JS部分比较费劲之外😓,很快,一个基于WKWebView的数学展示控件基本成型,在 iOS9 中测试一切OK😄,切换至 iOS8 测试,噩梦开始了😭💔
无法加载本地资源
- 假设现在有本地 HTML 文件:localHTML.html,其中引用了一个本地 JS 文件:localJS.js;一个本地 css 文件:localCSS.css,你会发现在 iOS9 下加载一切正常的文件们在 iOS8 下统统找不到,具体表现为打开 safari 进行调试(不知道如何利用 safari 调试 iOS 上 web 内容的看这里),本地文件全部为红色,表示无法加载
- 最初,我以为是目录结构的问题,各种尝试,但一直无果。被这个问题卡了2天加一个周末后,我看到了爆栈上的一个问答,我放弃了😞,决定将除了 HTML 之外的所有文件都存放在 server,以为这样就万事大吉了,但没想到自己还是 too young too naive😭
在 HTML 中设置 meta charset="utf-8" 无效
-
我们都知道,如果在 HTML 的 <head> 标签中设置
utf-8
,表示这个文件及其所引用的所有文件都以utf-8
的编码形式打开,例如:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>This is a text</title> </head> <body> ... </body> </html>
然后,当我把所有本地文件都移动至 server,高高兴兴😄的开始测试的时候,发现无法渲染数学公式,打开 safari 调试,发现所有的 js / css,都变成了乱码,可是iOS9 上还是正常的!!!!!!,简直是晴天霹雳,我顿时又懵逼了😂
-
在自学了半天 css 之后,我决定每次在 HTML 中引用其他文件时,都在后面加上
utf-8
,例如:<link type="text/css" rel="stylesheet" href="lounge.css" charset="utf-8">
果然本我修复了大半,注意这里是大半,不是完全,因为我又发现这些被引用的文件在引用其他文件时也会是乱码,例如 MathJax 引用自己的其他文件时,我再次进入懵逼状态😂😆
无法使用 NSURLProtocol 拦截请求
- 基于上面的两点,我彻底放弃了 WKWebView,我很不服气,自己先是被 JS 玩得不要不要的, 然后又被 apple 玩的不要不要的,但是又有什么办法呢,生活还要继续不是吗?😂
- 至于无法使用 NSURLProtocol 拦截请求,我还没有亲自尝试,据说是因为
WKWebView
是在其他进程
去做请求,而非当前进程(参考) - 这点相当糟糕,要知道 NSURLProtocol 绝对是个大杀器
样式同 UIWebView 有较大差距
- 同一个 css,在 UIWebView 和 WKWebView 上形式有很大区别,而恰恰安卓的样式同
前者
基本一致,试想以下你需要为 android 和 iOS 写两个不同的 css 文件,蛋碎😭 - 而且,根据我的实验,有时对 css 的修改 WKWebView 还不买账,具体原因不详
总结
一句话总结:貌似 apple 是不会修复 WKWebView 在 iOS8 上的这些 bug 了,所以我们就等吧,等到 iOS8 用户几乎没有,app 最低支持 iOS9 的时候,再去用它