美文网首页iOS 大神之路iOS精选博文架构师之路
【iOS开发】从 UIWebView 到 WKWebView

【iOS开发】从 UIWebView 到 WKWebView

作者: KyXu | 来源:发表于2015-10-06 00:35 被阅读43355次

    引言


    ①本文章适合有 UIWebView 基础的人看,如果实在没用过的话,至少你要知道 UIWebView 是个什么东西。

    ② UIWebView 和 WKWebView 的区别
    WKWebView 更快(占用内存可能只有 UIWebView 的1/3~1/4),没有缓存,更为细致地拆分了 UIWebViewDelegate 中的方法。
    想要了解更多关于 WKWebView 的特性的,可以自行 Google,这里你可以简单地把它当做是轻量级的 UIWebView。

    ③为什么现在是时候从 UIWebView 迁移到 WKWebView 了:
    截止到我写这篇文章的时候,据 mixpanel 的数据,iOS 9 占有率已达 58.55%,iOS 8 占有率达到了 34.78%,iOS 7 及更早版本是 6.66%,而那 6.66% 应该大部分都是对手机使用极度不频繁的人。所以从现在开始,再开发 App 只兼容 iOS 8 和 iOS 9 两个版本就可以了(如果你的产品对覆盖率要求不是很苛刻的话)。WKWebView 是 iOS 8 之后才有的 WebKit 中的内容,所以之前我们要同时兼容 iOS 7 和 iOS 8 的时候,可以推辞说 UIWebView 和 WKWebView 一起做太麻烦了,现在可没有理由拒绝新东西了。

    正文


    常用代理方法

    在 WKWebView 中,UIWebViewDelegate 与 UIWebView 被重构成了14类与3个协议,下面给出一些在 UIWebView 中常用的方法的 WKWebView 版本。

    准备加载页面

    UIWebViewDelegate - webView:shouldStartLoadWithRequest:navigationType
    WKNavigationDelegate - webView:didStartProvisionalNavigation:
    

    已开始加载页面,可以在这一步向view中添加一个过渡动画

    UIWebViewDelegate - webViewDidStartLoad:
    WKNavigationDelegate - webView:didCommitNavigation:
    

    页面已全部加载,可以在这一步把过渡动画去掉

    UIWebViewDelegate - webViewDidFinishLoad:
    WKNavigationDelegate - webView:didFinishNavigation:
    

    加载页面失败

    UIWebViewDelegate - webView:didFailLoadWithError:
    WKNavigationDelegate - webView:didFailNavigation:withError:
    WKNavigationDelegate - webView:didFailProvisionalNavigation:withError:
    

    以上方法分别存在于 UIWebViewDelegate 和 WKNavigationDelegate 中。
    如果你之前只是用到了以上列出的 UIWebViewDelegate 中的几个方法,那么只是简单地换一个方法名,让你的 ViewController 继承 WKNavigationDelegate ,继续用就可以了。想要更多内容可以自己用 cmd键+鼠标左击『WKNavigationDelegate』通过 Xcode 查看。
    要注意的是 webview.delegate = self 需要改写为 webview.navigationDelegate = self

    JS交互

    在 UIWebView 中,一句简单的webView.stringByEvaluatingJavaScriptFromString() 就可以用 JS 脚本操纵 WebView,在 WKWebView 中,我们可能需要用到 WKScriptMessageHandler 这个协议中的 func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) 方法。

    下面的示例代码用于从 WKWebView 中获取网页中的文本。

        let js = "window.webkit.messageHandlers.observe.postMessage(document.body.innerText);" // 注意这里的observe字段是自己写的,不是固定的写法,参考第6行
        let script = WKUserScript(source: js, injectionTime: WKUserScriptInjectionTime.AtDocumentEnd, forMainFrameOnly: true) // 这里的 AtDocumentEnd 字段是指网页中的内容加载完毕后再插入 JS 脚本,你也可以选择 AtDocumentStart,在 document element 刚刚创建时就插入脚本,看具体需求
        let config = WKWebViewConfiguration()
        config.userContentController.addUserScript(script)
        config.userContentController.addScriptMessageHandler(self, name: "observe") // 对应第一行 JS 脚本中的observe字段
        //初始化WKWebView
        let webview = WKWebView(
            frame: CGRectMake(0, 0, self.view.frame.width, self.view.frame.height),
            configuration: config)
        webview.navigationDelegate = self
        self.view.addSubview(webview)
        //加载网页
        webview.loadRequest(NSURLRequest(URL: NSURL(string: "http://www.jianshu.com")!))
    

    可能你也注意到了,把 JS 脚本注入到 WebView 的途径是初始化一个 WebView,所以你需要在 WebView 初始化之前写好自己的脚本。当然如果你不需要 JS 交互,直接用一个 frame 来初始化 WebView,去掉 configuration 参数就好了。

    然而,我们如何拿到从 WKWebView 中抓取到的文本呢(通过 document.body.innerText 这一句)?
    如上面所说,让你的 ViewController 在继承了 WKNavigationDelegate 之后再继承一下 WKScriptMessageHandler 。然后实现 WKScriptMessageHandler 中唯一的一个方法:

    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage){
        let str:NSString = message.body as! NSString // 因为我们抓取到的是文本,这里把 message.body 强制转换为 NSString,如果你通过 JS 拿到的是其他信息,按需转换
        print(str)
    }
    

    乍一看这里可能会有疑惑:我们给 WKWebView 绑定了 WKNavigationDelegate,但是 WKScriptMessageHandler 并没有提供代理方法啊。其实与此相对应的过程出现在上一段代码中的第5行:config.userContentController.addScriptMessageHandler 这一句。

    相关文章

      网友评论

      • FengxinLi:请问一下 WKWebView计算高度然后然后之后 把WKWebView设置成计算的高度 ,图片点击之后是黑色的是怎么回事?
      • 美的不像话:我现在就遇到 wkwebview 的坑了, 在 web 中,html 页面,open 打开一个 window ,wkwebview 经过 createWebViewWithConfiguration 方法 指挥重新加载或者重新建立一个 web 吗? 我现在的需求是 open 打开的 html 页面还可以给上个 html 页面 postmessage 数据
      • 8e30e7360bc9:怎么是swift,有没有oc 语言编写的,这代码看着有点陌生,,
        8e30e7360bc9:。。。
      • Zclee:有oc的代码吗
      • 伯牙呀:if (_webView.canGoBack) {
        [_webView goBack];
        }

        如果这样返回的话,你加在webView:didCommitNavigation上的过渡动画会再走一遍的,这个怎么办?
      • macfai:写的真是干货,赞一个,受益不少,多谢楼主 :smile:
      • 253a89b65070:wkwebview 可编辑文本时,要怎么监听光标的位置呢
      • Bob林:加载本地的2个 js 文件,这个 WKWebView 是怎么操作的 搞2个 [configuration.userContentController addUserScript:script];?
      • 巴图鲁:膜拜
      • 5261179e024b:大神,你们公司招人么 ios 两年 半。
        KyXu:@imeditation 我自己工作还没定下来呢
      • Dexterxiee:有没有遇到过这个问题 用web 读 pdf (word 转换的) 会崩溃呢。

        但是我真机上打开就很正常(非xcode 模拟打开)
      • lesmiserables0:wknavigationdelegate 协议中的方法:webview didstartprovisionalNavigation:navigation与webview中的shouldStartLoadWithRequest:navigationType:对比,缺少一个request参数,这样的话,怎么截获request请求呢?
        KyXu:@lesmiserables0 你试试这个行不行:func webView(webView: WKWebView, decidePolicyForNavigationAction navigationAction: WKNavigationAction, decisionHandler: (WKNavigationActionPolicy) -> Void) 这个方法是 WKNavigationDelegate 里面的,方法里的 navigationAction 参数有个 request 属性
      • 随风风流:JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        这是UIWebView获取context对象,
        请问在WKWebView中应该如何获取context对象呢?
      • King_Whb:我只是遇到这方面的问题了,刚才说话不太美,太严肃了 :blush:
      • King_Whb:对于 WKWebView 内存释放问题应该如何解决?如何适配 iOS8一下系统?
        King_Whb:@0b32f60e358d 已经解决了
        0b32f60e358d:@King_Whb 把这段代码粘贴到网页加载完的代理方法中 ,憋问我为什么 我只是 代码的搬运工。
        // 防止内存飙升

        [[NSUserDefaults standardUserDefaults] setInteger:0 forKey:@"WebKitCacheModelPreferenceKey"];

        [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"WebKitDiskImageCacheEnabled"];//自己添加的,原文没有提到。

        [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"WebKitOfflineWebApplicationCacheEnabled"];//自己添加的,原文没有提到。

        [[NSUserDefaults standardUserDefaults] synchronize];
        KyXu:@King_Whb @King_Whb 没办法适配iOS8以下,以下用UIWebView,内存释放和它本身没关系,你去学学如何做内存管理
      • angelen:您好,我公司项目也将 UIWebView 转成 WKWebView 了,不过遇到一个问题就是,我打开一个网页(就比如简书中随便的一个网页),发现其耗电量(Xcode -> Open Developer Tool -> Instruments -> Energy Log)经常会是 16/20、17/20 甚至 19/20,我觉得好奇怪一个简单的网页会那么耗电吗?代码我也没有怎么处理,就用来展示的而已。
        angelen:@KyXu OK,谢谢
        KyXu:@angelen 控制一下变量,你去写个demo,除了网页别的都没有的demo,进行一下耗电比对
      • 9c58bd36a97b:你好,我现在做 swift 加载 js 包,包里是 html ,html上的数据是从服务器申请下来.现在想从外部链接直接打开 html 里的一个页面.请问怎么办
      • Jakuri:太需要了,特别是两个版本相对应的代理那里,感谢!
      • 一把辛酸泪__:哥们,要来北京发展吗?
        KyXu:@醉江月 啥公司啊
        一把辛酸泪__:@KyXu 来北京吧,我们在招人呢 :blush:
        KyXu:@醉江月 目前是杭州,以后就不知道啦
      • 672d2fbe1ab3:初学swift,一步一个坎,一步一个坑,请问做一个最简单的例子,在storyboard上放一个webview,加载时显示www.baidu.com,可是web view有时不显示,有时不全屏,只占模拟器的一小部分,需要怎么设置能全屏?怎么设置storyboard下方的any,compact、regular
        398944e9e75b:现在js做iOS UI的框架太多了
        398944e9e75b:@gada352 可以研究下storyboard的约束 或者代码约束
        KyXu:@gada352 你需要的内容比较多,建议去极客学院跟视频,你刚刚说的例子上面有
      • KyneChen:感谢分享~ :clap:
        KyXu:@陈凯昂 感谢鼓励~
      • liuliji:很有收获
      • LIANGMIAOPM:如何获取web view的高度?为什么每次打印是0
        KyXu:@ios菇凉 print(webview.frame.height)
      • 9018b2639239:大哥,你独立开发,服务器也是你自己写?
        KyXu:@limg 花1秒做决定,花几个月上线第一款独立作品,多好的开端
        9018b2639239:谢谢,我也想做独立开发
        KyXu:@limg 不会做后台,服务器用 LeanCloud,或者用JS抓网页,转嫁流量到别的网页上
      • 奔奔奔跑:大哥你是全栈?独立开发?厉害哦!赞一个
        KyXu:@纯属玩笑 谢谢,离全栈还差得很远很远,自己会做UI、能写Swift而已

      本文标题:【iOS开发】从 UIWebView 到 WKWebView

      本文链接:https://www.haomeiwen.com/subject/bdngcttx.html