WKWebView新特性及JS交互

声明

本博文原始地址在：
http://mp.weixin.qq.com/s?__biz=MzIzMzA4NjA5Mw==&mid=400327803&idx=1&sn=2a09fa94dd605a9f03bbc16f998e5717#rd

本博客不会在此处更新文章，请关注微信公众号，更新的内容只会是在原文更新。

引言

一直听说WKWebView比UIWebView强大许多，可是一直没有使用到，今天花了点时间看写了个例子，对其API的使用有所了解，为了日后能少走弯路，也为了让大家更容易学习上手，这里写下这篇文章来记录如何使用以及需要注意的地方。

温馨提示：本人在学习使用过程中，确实有此体会，WKWebView的确比UIWebView强大很多，与JS交互的能力显示增强，在加载速度上有所提升。

WKWebView新特性

• 性能、稳定性、功能大幅度提升
• 允许JavaScript的Nitro库加载并使用（UIWebView中限制）
• 支持了更多的HTML5特性
• 高达60fps的滚动刷新率以及内置手势
• GPU硬件加速
• KVO
• 重构UIWebView成14类与3个协议，查看官方文档

准备工作

首先，我们在使用的地方引入模块：

import Webkit

在学习之前，建议大家先点击WKWebView进去阅读里面的相关API，读完一遍，有个大概的印象，学习起来就很快了。

其初始化方法有：

public init()
public init(frame: CGRect)
public init(frame: CGRect, configuration: WKWebViewConfiguration)

加载HTML的方式与UIWebView的方式大致相同。其中，loadFileURL方法通常用于加载服务器的HTML页面或者JS，而loadHTMLString方法通常用于加载本地HTML或者JS：

public func loadRequest(request: NSURLRequest) -> WKNavigation?

// 9.0以后才支持   
@available(iOS 9.0, *)
public func loadFileURL(URL: NSURL, allowingReadAccessToURL readAccessURL: NSURL) -> WKNavigation?

// 通常用于加载本地HTML或者JS
public func loadHTMLString(string: String, baseURL: NSURL?) -> WKNavigation?

// 9.0以后才支持
@available(iOS 9.0, *)
public func loadData(data: NSData, MIMEType: String, characterEncodingName: String, baseURL: NSURL) -> WKNavigation

与之交互用到的三大代理：

• WKNavigationDelegate，与页面导航加载相关
• WKUIDelegate，与JS交互时的ui展示相关，比较JS的alert、confirm、prompt
• WKScriptMessageHandler，与js交互相关，通常是ios端注入名称，js端通过window.webkit.messageHandlers.{NAME}.postMessage()来发消息到ios端

创建WKWebView

首先，我们在ViewController中先遵守协议：

class ViewController: UIViewController, WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate

我们可以先创建一个WKWebView的配置项WKWebViewConfiguration，这可以设置偏好设置，与网页交互的配置，注入对象，注入js等：

// 创建一个webiview的配置项
let configuretion = WKWebViewConfiguration()

// Webview的偏好设置
configuretion.preferences = WKPreferences()
configuretion.preferences.minimumFontSize = 10
configuretion.preferences.javaScriptEnabled = true
// 默认是不能通过JS自动打开窗口的，必须通过用户交互才能打开
configuretion.preferences.javaScriptCanOpenWindowsAutomatically = false

// 通过js与webview内容交互配置