iOS 8 WKWebView 知识点

首先看看这篇文章，写得很好：http://nshipster.cn/wkwebkit/

再推荐去看看 iOS_8_by_Tutorials 这本书里的 WKWebView相关章节！

我这里说下自己的简单体会：

1.对比UIWebView ，网上说WKWebView的效率要高，到底高多少，不清楚。

2.WKWebView将javascript的注入，以及javascript传回数据的方法标准化了。在UIWebView时代，执行javascript没什么问题，但是从javascript传回数据就麻烦得多，大多是通过拼写url，调用shouldStartLoadWithRequest方法时传入json数据，写起来十分不规范。也有一些第三方库实现的不错，但毕竟不是原生的。使用WKWebView就可以通过在js中调用webkit.messageHandlers 发送数据到在oc中的代理函数。详见 iOS_8_by_Tutorials。

在swift中插入函数接口的方法：

class NotificationScriptMessageHandler: NSObject, WKScriptMessageHandler {
    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage!) {
        println(message.body)
    }
}

let userContentController = WKUserContentController()
let handler = NotificationScriptMessageHandler()
userContentController.addScriptMessageHandler(handler, name: "handlerName")

下面是js中的方法，注意，可以直接传入js数组，会自动转化为swift可识别的数组！这一点非常好，不需要使用json自己转换了。

function getRelatedArticles() {
    var related = [];
    var elements = document.getElementById("related").getElementsByTagName("a");
    for (i = ; i < elements.length; i++) {
        var a = elements[i];
        related.push({href: a.href, title: a.title});
    }

    window.webkit.messageHandlers.handlerName.postMessage({articles: related});
}

3.WKWebView可以监听到载入进度了。

4.用新的代理函数

func webView(webView: WKWebView!, decidePolicyForNavigationAction navigationAction: WKNavigationAction!, decisionHandler: ((WKNavigationActionPolicy) -> Void)!)

替代了 UIWebView使用的

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

去决定一个url请求是否应该被执行。

5.ios9用WKWebView读取本地文件时，需要用到一个特殊函数，不然没有权限

- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL NS_AVAILABLE(10_11, 9_0);

这个函数是ios9才有的，如果你要支持ios8，请参考以下链接 http://stackoverflow.com/questions/24882834/wkwebview-not-loading-local-files-under-ios-8/28676439#28676439 简单地说就是创建了一个特殊目录。

6.如果使用WKWebView读取本地文件，就涉及到一个获取本地文件url的问题，比如有一个文件，它在main bundle中，路径是

/Users/Rufus/Library/Developer/CoreSimulator/Devices/15F63516-5F19-4CE9-B709-AC7FC0F9E660/data/Containers/Bundle/Application/C5EDBEDF-54B1-4B7C-9EE5-216337584D2D/HtmlWrapper.app/1.png

为了显示它，我们可以需要创建一个request，而创建request需要url，那么用下面方法中的哪一个方法创建url呢？

 let fileUrl = URL(fileURLWithPath: resourcePath)
 let normalUrl = URL(string: resourcePath)

答案是，第一个 let fileUrl = URL(fileURLWithPath: resourcePath)。

如果你使用了let normalUrl = URL(string: resourcePath) 生成一个url，并利用这个url生成request，再传递给webview，webview是读不出任何东西的。

这是因为fileURLWithPath这个方法生成的是一个

file:///Users/Rufus/Library/Developer/CoreSimulator/Devices/15F63516-5F19-4CE9-B709-AC7FC0F9E660/data/Containers/Bundle/Application/C5EDBEDF-54B1-4B7C-9EE5-216337584D2D/HtmlWrapper.app/1.png

这种形式的url。这个file，就像http一样，是一种协议，这个协议指的是从本地存储中读取资源，这个协议不需要自己架设什么服务器，系统底层就会执行具体操作，返回文件内容。

而如果我们使用URL(string: resourcePath)，生成的就是一个

/Users/Rufus/Library/Developer/CoreSimulator/Devices/15F63516-5F19-4CE9-B709-AC7FC0F9E660/data/Containers/Bundle/Application/C5EDBEDF-54B1-4B7C-9EE5-216337584D2D/HtmlWrapper.app/1.png

这样的Url，这个url没有写明协议，那么系统会默认为http协议，并可能补全缺少的主机名，所以WKWebView最终可能使用的是

http://localhost/Users/Rufus/Library/Developer/CoreSimulator/Devices/15F63516-5F19-4CE9-B709-AC7FC0F9E660/data/Containers/Bundle/Application/C5EDBEDF-54B1-4B7C-9EE5-216337584D2D/HtmlWrapper.app/1.png

想用http协议，必须有服务器，然而我们又没有在ios设备上运行http服务器，当然无法通过http协议读取这个所谓路径的任何东西了。

这里需要注意的是：在UIWebView上，是可以使用URL(string: resourcePath)读取一个本地的文件的！应该是UIWebView内部有逻辑，能够自动识别file 协议的url，并按照file协议读取对应文件。但是，这并不是一个严谨的方法，在创建本地文件url时，就该使用 let fileUrl = URL(fileURLWithPath: resourcePath)这种形式。

7.

在用webview请求内容时，经常会遇到重定向问题，看一下重定向的相关知识：

http://blog.csdn.net/bluishglc/article/details/7953614

这里简单地总结下，最常遇到的重定向是服务器返回一个301或者302状态的http response，并将新的地址加到这个response的header中，对应的key是Location。webview收到response后，查看是这个状态，就会自动发起另一个请求，跳转到新地址。

8.对于ios8以上的版本，不应该使用UIWebView了，官方文档已经明确指出：

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.

9.对于WKWebView，主要有4个load方法，我们分别看一看

open func load(_ request: URLRequest) -> WKNavigation?
open func loadFileURL(_ URL: URL, allowingReadAccessTo readAccessURL: URL) -> WKNavigation?
open func loadHTMLString(_ string: String, baseURL: URL?) -> WKNavigation?
open func load(_ data: Data, mimeType MIMEType: String, characterEncodingName: String, baseURL: URL) -> WKNavigation?

先看看，open func loadHTMLString(_ string: String, baseURL: URL?) -> WKNavigation?

这个方法可以通过baseURL的解释如下：A URL that is used to resolve relative URLs within the document.

举个例子，比如在html中，存在这样的代码

<script src="/javascripts/browser.min.js"></script>

那么，这个/javascripts/browser.min.js就是相对路径，relative url，单凭这个url是读不到任何资源的，因为它不完整，解析这个html的模块，都会负责把这个url补全，再去加载对应的资源。而wevView就可以利用这里的baseUrl进行补全。

说到baseUrl，再解释一下baseURL。在stackoverflow上有如下答案：

-baseURL is a concept purely of NSURL/CFURL rather than URLs in general

就是说 baseURL并不存在真正的URL定义中，仅仅是cocoa 库的一个写法，再看看URL的定义

Uniform / Universal Resource Locator，常缩写为URL，

统一资源定位符的标准格式如下：

协议类型://服务器地址（必要时需加上端口号）/路径/文件名

这里的协议，除了常用的http，https，还有一些别的，比如file，ftp 类型。我们把桌面上的图片拖入游览器当中，游览器显示了图片，并且在地址栏上显示了file:///Users/Rufus/Desktop/1.png，这个就是URL的一种，file协议省略了服务器名，所以出现了三个/，其实是  file://指的是协议，后面指的是路径。

可以看到，根本没有什么baseUrl的说明，这个baseUrl，就是ios提供的便利方法，方便把html中常出现的相对路径（relative url），转化为一个完整的url（absolute url）。
具体的作用和使用方法需要根据每个api而定。

---

再看看这个open func loadFileURL(_ URL: URL, allowingReadAccessTo readAccessURL: URL) -> WKNavigation?

读起来好像可以给出访问资源的权限？但是什么地方的文件会有权限不让访问呢？我在ios10上做了以下测试：

       print("home is",NSHomeDirectory())
        // Do any additional setup after loading the view, typically from a nib.

        let wkWebView = WKWebView(frame:CGRect(x: , y: , width: , height: ))
        self.view.addSubview(wkWebView)

        let path = Bundle.main.path(forResource:"", ofType: "png")

        let documentsPath = NSHomeDirectory()+"/Documents/1.png"
        let tmpPath = NSTemporaryDirectory()+"/1.png"
        let cachePath = NSHomeDirectory()+"/Library/Caches/1.png"

        let fileManager = FileManager.default;

        do{
            try fileManager.copyItem(atPath: path!, toPath: cachePath)
            try fileManager.copyItem(atPath: path!, toPath: documentsPath)
            try fileManager.copyItem(atPath: path!, toPath: tmpPath)

        }catch{
            print(error)
        }

        wkWebView.load(URLRequest(url:URL(fileURLWithPath: path!)))

        //wkWebView.load(URLRequest(url:URL(fileURLWithPath: documentsPath)))
        //wkWebView.load(URLRequest(url:URL(fileURLWithPath: tmpPath)))
        //wkWebView.load(URLRequest(url:URL(fileURLWithPath: cachePath)))

常用的4个路径都测试了，都可以正确地读取数据。是不是由于这个文件是本地拷贝的所以才行呢？我决定再实验一个从远程下载的文件。

 let urlSession = URLSession(configuration: URLSessionConfiguration.default)
        urlSession.downloadTask(with:URL(string:"https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png")!) { (url:URL?, response:URLResponse?, error:Error?) in
            print("url is ",url);

            let dstPath = NSHomeDirectory()+"/Documents/2.png"

            let dstPath2 = NSHomeDirectory()+"/Library/Caches/2.png"

            let dstUrl = URL(fileURLWithPath: dstPath2)

            do{
                try fileManager.moveItem(at: url!, to: dstUrl)

            }catch{
                print(error)
            }

            wkWebView.load(URLRequest(url:dstUrl))

            }.resume()

结果是，也都可以正常读取资源。
那么这个 allowingReadAccessTo 方法到底在什么条件下使用呢？

测试的html文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
aaaaa
<img src="./1.png">

</body>
</html>

这个html放在documents下面，1.png也是放在documents下面。

将这个html分别放在实验1中的4个位置，读取资源，这个资源的位置也需要分别放在4个位置，其实就是16种情况。

我做了以下测试：

　　　　let documentDirPath = NSHomeDirectory()+"/Documents"

let documentUrl = URL(fileURLWithPath: documentDirPath)

　　

生成Url时的baseUrl 和 webview load 时的baseUrl 没什么联系，后者才能把Html内容中相对路径补全为绝对路径。

let fileUrl = URL(fileURLWithPath: "3.html", relativeTo: documentUrl)

let fileUrl2 = URL(fileURLWithPath:(documentDirPath+"/3.html"))

//wkWebView.loadFileURL(fileUrl, allowingReadAccessTo:documentUrl) //wrong

//wkWebView.loadFileURL(fileUrl2, allowingReadAccessTo:Bundle.main.resourceURL!) //wrong

//wkWebView.loadFileURL(fileUrl2, allowingReadAccessTo:documentUrl)

wkWebView.load(URLRequest(url:fileUrl)) //simulator :correct   device:wrong

先看一下2个url的不同之处，

(lldb) po fileUrl.baseURL
▿ Optional<URL>
  ▿ some : file:///Users/Rufus/Library/Developer/CoreSimulator/Devices/C83D85F0-82E8-4608-B643-890A75362FEB/data/Containers/Data/Application/E56AF850-3CD2-4D76-88F3-8F37BA74A054/Documents/

(lldb) po fileUrl2.baseURL
nil

(lldb) po fileUrl.relativePath
"3.html"

(lldb) po fileUrl2.relativePath
"/Users/Rufus/Library/Developer/CoreSimulator/Devices/C83D85F0-82E8-4608-B643-890A75362FEB/data/Containers/Data/Application/E56AF850-3CD2-4D76-88F3-8F37BA74A054/Documents/3.html"

(lldb) po fileUrl.absoluteString
"file:///Users/Rufus/Library/Developer/CoreSimulator/Devices/C83D85F0-82E8-4608-B643-890A75362FEB/data/Containers/Data/Application/E56AF850-3CD2-4D76-88F3-8F37BA74A054/Documents/3.html"

(lldb) po fileUrl2.absoluteString
"file:///Users/Rufus/Library/Developer/CoreSimulator/Devices/C83D85F0-82E8-4608-B643-890A75362FEB/data/Containers/Data/Application/E56AF850-3CD2-4D76-88F3-8F37BA74A054/Documents/3.html"

注意到，这2个url虽然 absoluteString 值完全一样，但是其他的2个值完全不同。其实，对于RFC来说，URL指的就是absoluteString，另外的2个值，都是为了ios方便使用而设计的。

最后的这4种载入，前2个是错误的，后两个是正确的，我们看看那2个错的有什么问题。

  //wkWebView.loadFileURL(fileUrl, allowingReadAccessTo:documentUrl) //wrong

  //wkWebView.loadFileURL(fileUrl2, allowingReadAccessTo:documentUrl) //correct

显然，wkWebView.loadFileURL对于fileUrl是无法读取的，但是却能读取 fileUrl2这种最普通方法创建的Url！

再看这个

  //wkWebView.loadFileURL(fileUrl, allowingReadAccessTo:documentUrl) //wrong

  wkWebView.load(URLRequest(url:fileUrl)) //simulator:correct device:wrong

 wkWebView.load 方法却是可以使用fileUrl的！但是真机由于访问权限问题，load方法读取不到任何本地资源，想读取本地资源，就要使用loadFileURL方法

。
这样看起来，平常最好还是使用最基本的字符串创建Url！

再看下面的对比

//wkWebView.loadFileURL(fileUrl2, allowingReadAccessTo:Bundle.main.resourceURL!) //wrong
//wkWebView.loadFileURL(fileUrl2, allowingReadAccessTo:documentUrl) //correct

这组对比，就能体现allowingReadAccessTo的作用了。第一个失败了，就是因为在这次加载过程中，仅仅赋予了Bundle.main.resourceURL中的权限，那么放在documents目录下的html自然无法被webview载入了！

 @discussion If readAccessURL references a single file, only that file may be loaded by WebKit.
     If readAccessURL references a directory, files inside that file may be loaded by WebKit.

我觉得这是一个为了安全而设计的方法：用这个方法加载一个不确定是否安全的url，就可以指定这次加载的访问范围，防止这个url访问到别的资源。当怀疑一个url的安全性时，就应该使用这种加载方法!

需要特殊说明的是，这个allowingReadAccessTo参数在模拟器上不能限制html内部资源的访问范围，但是在真机上是可以的！比如：

把allowingReadAccessTo设置到/Documents/Sub/范围时，上层目录中的图片也可以被顺利读取。

但是如果实在真机上，就不能读取了！必须获得Documents的权限才行，因为1.png是直接放在documents下的。