WKWebView 是现代 WebKit API 在 iOS 8 和 OS X Yosemite 应用中的核心部分。它代替了 UIKit 中的 UIWebView 和 AppKit 中的 WebView,提供了统一的跨双平台 API。
自诩拥有 60fps 滚动刷新率、内置手势、高效的 app 和 web 信息交换通道、和 Safari 相同的 JavaScript 引擎,WKWebView 毫无疑问地成为了 WWDC 2014 上的最亮点。
WKWebview提供了API实现js交互 不需要借助JavaScriptCore或者webJavaScriptBridge。使用WKUserContentController实现js native交互。简单的说就是先注册约定好的方法,然后再调用。
UIWebView & UIWebViewDelegate 这个两个东西是如何在 WKWebKit 中被重构成 14 个类 3 个协议的呢。
WKWebKit Framework
一.相关类(Classes)
1.WKBackForwardList: 之前访问过的 web 页面的列表,可以通过后退和前进动作来访问到。
WKBackForwardListItem: webview 中后退列表里的某一个网页。
2.WKFrameInfo: 包含一个网页的布局信息。
3.WKNavigation: 包含一个网页的加载进度信息。
WKNavigationAction: 包含可能让网页导航变化的信息,用于判断是否做出导航变化。
WKNavigationResponse: 包含可能让网页导航变化的返回内容信息,用于判断是否做出导航变化。
4.WKPreferences: 概括一个 webview 的偏好设置。
5.WKProcessPool: 表示一个 web 内容加载池。
6.WKUserContentController: 提供使用 JavaScript post 信息和注射 script 的方法。
WKScriptMessage: 包含网页发出的信息。
WKUserScript: 表示可以被网页接受的用户脚本。
WKWebViewConfiguration: 初始化 webview 的设置。
7.WKWindowFeatures: 指定加载新网页时的窗口属性。
二、相关协议(Protocols)
1.WKNavigationDelegate: 提供了追踪主窗口网页加载过程和判断主窗口和子窗口是否进行页面加载新页面的相关方法。
2.WKScriptMessageHandler: 提供从网页中收消息的回调方法。
3.WKUIDelegate: 提供用原生控件显示网页的方法回调
三、UIWebView 和 WKWebView 的 API 区别
WKWebView 继承了 UIWebView 大部分的接口,这让 app 来继承 WKWebKit 也简单了许多(同时随着更新 iOS 8 的越来越多这也成为了某种必需)。
有兴趣的同学可以看一下这两个类的 API 区别:
1、代理
2、页面加载
3、访问历史
4、调用 Javascript
5、原生混用
6、页码
7、重构分离开的 WKWebViewConfiguration
四、JavaScript ↔︎ Swift 对话机制
相对于 UIWebView 最大的提升就是数据在可以 app 和 web 内容之间传递。
使用用户脚本来注入 JavaScript
WKUserScript 允许在正文加载之前或之后注入到页面中。这个强大的功能允许在页面中以安全且唯一的方式操作网页内容。
一个简单的例子如下,用户改变背景的用户脚本被插入到网页中:
WKUserScript 对象可以以 JavaScript 源码形式初始化,初始化时还可以传入是在加载之前还是结束时注入,以及脚本影响的是这个布局还是仅主要布局。于是用户脚本被加入到 WKUserContentController 中,并且以 WKWebViewConfiguration 属性传入到 WKWebView 的初始化过程中。
这个样例可以简单扩展为更为高级的页面修改方法,例如去除广告、隐藏评论等,更复杂的样例见此:让所有出现的”the cloud”变为”my butt”。
web 和 app 通讯机制也通过 message handler 有很大提升。
就想在Safari 审查元素功能中的 console.log 能在调试终端打印信息一样,网页中的信息也可以通过调用这个函数被传到 app 里:
window.webkit.messageHandlers.{NAME}.postMessage()
这个 API 真正神奇的地方在于 JavaScript 对象可以_自动转换_为 Objective-C 或 Swift 对象。
Handler 的名字可以通过 WKScriptMessageHandler 协议中的 addScriptMessageHandler() 接口函数设置:
于是当通知进入 app 的时候,比如说在页面中创建一个新对象,相关信息就可以这样传递:
window.webkit.messageHandlers.notification.postMessage({body:"..."});
添加用户脚本来对 web 事件监听并用 Message Handler 将信息传回 app。
同样的方法也可以用来收集页面信息用于 app 的页面展示或数据分析。
例如,如果某人要针对 NSHipster.com 做一个特别的浏览器,就可以加一个能够呼出相似文章列表的按钮:
网友评论