WKWebView 在 iOS8 下的坑

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 的时候,再去用它

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

  • UIWebView 之痛 开发App的过程中,常常会遇到在App内部加载网页,通常用UIWebView加载。而这个...
    zyl04401阅读 16,012评论 46 157
  • 转载自: http://www.jianshu.com/p/90a90bd13aac WKWebView从入门到趟...
    F麦子阅读 652评论 0 3
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • UIWebView 之痛 开发App的过程中,常常会遇到在App内部加载网页,通常用UIWebView加载。而这个...
    Style_mao阅读 1,422评论 1 5
  • 从今年下半年开始,原容桂实验学校由顺德一中教育集团正式托管,我们从此与顺德一中结缘。今年的开学跟往届有了很多不同,...
    小雨sunny阅读 201评论 0 0