首先看看这篇文章,写得很好: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 = 0; 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: 0, y: 400, 500, height: 500)) self.view.addSubview(wkWebView) let path = Bundle.main.path(forResource:"1", 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下的。