文档章节

从 UIWebView 到 WKWebView

秦无炎
 秦无炎
发布于 2017/05/05 16:57
字数 992
阅读 8
收藏 0
点赞 0
评论 0

引言


①本文章适合有 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 这一句。

 

原文:http://www.jianshu.com/p/f94cad074196

© 著作权归作者所有

共有 人打赏支持
秦无炎
粉丝 4
博文 119
码字总数 4984
作品 0
朝阳
程序员
iOS开发之WKWebView的使用以及遇到的问题

一、WKWebView简介 UIWebView自iOS2就有,WKWebView从iOS8才有,毫无疑问WKWebView将逐步取代笨重的UIWebView。通过简单的测试即可发现UIWebView占用过多内存,且内存峰值更是夸张。WKWebVi...

ziyuzhiye ⋅ 2017/12/29 ⋅ 0

解决WKWebview localstorage 存取信息不一致问题

为了缩短开发周期。我们尝试使用 用webview 加载html页面的方式,实现安卓、iOS开发的同步进行。 UIWebview 存在内存泄露问题,iOS8以后,苹果推出了新框架Webkit,提供了替换UIWebView的组件...

风中追风o ⋅ 2017/05/22 ⋅ 0

WKWebView针对于Cordova的IOS平台性能提升

聊聊家常 Ionic框架已经日益成熟,它使得我们很轻松就能实现与原生相似的体验,然而APP的速度是一个必要的条件,我们发现大多数NB的APP都有着一个共同的特点,那就是流畅。其实裸露的cordova...

赵_俊明 ⋅ 2016/08/19 ⋅ 0

WKWebview 和 WebViewJavascriptBridge 使用

有个要提前说一下,WKWebview cookie 与Native 的 cookie 是分开的,在接入WKWebview 的时候发现无法同步cookie,试过很多方法,还是不行。 最后还是不甘心的换回了webView, 如果有解决这个问...

PetitBread ⋅ 2017/06/09 ⋅ 0

WKWebView替换UIWebView

1.引入头文件 2.先使用WKWebView基本方法写个例子,加载baidu页面,写法跟UIWebView类似 用同样的方法,用UIWebView也写了一个页面做对比,发现差距好大,WKWebView内存是25M,而UIWebView是...

人仙儿a ⋅ 2017/08/16 ⋅ 0

UIWebView和WKWebView的使用及js交互

UIWebView和WKWebView的使用及js交互 web页面和app直接的交互是很常见的东西,之前尝试过flex和js的相互调用以及android和js的相互调用,却只有ios没试过,据说比较复杂。周末花了点时间研究...

lewis-180 ⋅ 2015/12/08 ⋅ 0

表格视图嵌套WKWebView高度自适应

前言 Important Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView. WKWebVIew是iOS8新出的API,旨在替代原有的UIWebVi......

WB_小文 ⋅ 2017/11/12 ⋅ 0

JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪 ⋅ 05/29 ⋅ 0

js与native交互

js与native交互 UIWebView Native调用JS,使用来解释执行js脚本。 PS:苹果推荐iOS8之后的app使用来代替 UIWebView,同时也使用方法来替代 stringByEvaluatingJavaScriptFromString,因为会一...

coolwxb ⋅ 2016/12/02 ⋅ 0

iOS的Cookie存取看我绝对够!!

2016.06.29 当前一些公司为了快速出一款app,很多时候采用UINavigationController+WebView或者NavigationController+UITabbarVC+WebView的方式,这样就不可避免的需要使用cookie与Html5交互,...

si1ence ⋅ 2017/12/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL主从复制原理、半同步操作步骤及原理

1.1 企业Linux运维场景数据同步方案 1.1.1 文件级别的异机同步方案 1、scp/sftp/nc 命令可以实现远程数据同步。 2、搭建ftp/http/svn/nfs 服务器,然后在客户端上也可以把数据同步到服务器。...

xiaomin0322 ⋅ 13分钟前 ⋅ 0

Oracle10g 数据及文件迁移过程[原]

QL*Plus: Release 10.2.0.1.0 - Production on 星期三 5月 11 10:22:35 2011 Copyright (c) 1982, 2005, Oracle. All rights reserved. 连接到: Oracle Database 10g Enterprise Edition Re......

harrypotter ⋅ 19分钟前 ⋅ 0

nginx安装

1:安装工具包 wget、vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc gcc-c++ 2:下载nginx安装包 wget http://nginx.org/download/nginx-1......

壹丶贰 ⋅ 22分钟前 ⋅ 0

ideaVim安装及配置

1.安装插件 File-Settings-Plugins,Browse Repositories,输入ideavim,安装。 重启后,在Tools-Vim Emulator启用。 2.快捷键设置 ideaViim键与idea快捷键有冲突,可以在Settings-Other Se...

Funcy1122 ⋅ 26分钟前 ⋅ 0

MySQL中B+Tree索引原理

B+树索引是B+树在数据库中的一种实现,是最常见也是数据库中使用最为频繁的一种索引。B+树中的B代表平衡(balance),而不是二叉(binary),因为B+树是从最早的平衡二叉树演化而来的。在讲B...

浮躁的码农 ⋅ 41分钟前 ⋅ 0

两道面试题,带你解析Java类加载机制

在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如下面这道题: class Grandpa{ static { System.out.println("爷爷在静态代码块"); }} cl...

1527 ⋅ 45分钟前 ⋅ 0

SpringCloud(Data Flow)

dataflow-server

赵-猛 ⋅ 55分钟前 ⋅ 0

深入理解Java虚拟机

这本书我读到第8章,之后就是在读不下去了。 读到后面是一种痛苦的体验,太多的东西是不全面的,大量的专有名词是没有解释的,读到最后很多东西仅仅是一个侧面,所以我觉得,这本书不适合初学...

颖伙虫 ⋅ 今天 ⋅ 0

NanoPi NEO core/ Ubuntu16.04单网卡配置3个IP地址(2个静态,1个动态)

配置 root@NanoPi-NEO-Core:/etc/network# cat interfacesauto loiface lo inet loopbackallow-hotplug eth0iface eth0 inet static address 172.31.188.249 netmask 255.......

SamXIAO ⋅ 今天 ⋅ 0

三步为你的App集成LivePhoto功能

摘要:LivePhoto是iOS9新推出的一种拍照方式,类似于拍摄Gif图或录制视频片段生成图片。如果没有画面感,可以联想《哈利波特》霍格沃茨城堡的壁画,哈哈,很炫酷有木有,但坑爹的是只有iphone6S以...

壹峰 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部