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下的。
iOS 8 WKWebView的更多相关文章
- iOS 8 WKWebView 知识点
首先看看这篇文章,写得很好:http://nshipster.cn/wkwebkit/ 再推荐去看看 iOS_8_by_Tutorials 这本书里的 WKWebView相关章节! 我这里说下自己的简 ...
- iOS(WKWebView)OC与JS交互 之三
随着H5功能愈发的强大,没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发,在iOS7操作系统下,常用的native,js交互框架有easy-js,WebViewJavascr ...
- iOS 添加WKWebView导致控制器无法释放的问题
在WkWebView与JavaScript交互中,经常会在原生中注入MessageHandler,app中注入MessageHandler的方法 WKWebViewConfiguration *con ...
- iOS - 让WKWebView 支持 NSURLProtocol
iOS8以后,苹果推出了新框架Webkit,提供了替换UIWebView的组件WKWebView.各种UIWebView的问题没有了,速度更快了,占用内存少了,一句话,WKWebView是App内部加 ...
- iOS之WKWebView加载的网页自适应大小
一,前言 有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢? 以下代码可以适配大小(原本不可以 ...
- iOS - 使用WKWebView时OC调JS的user-select属性控制用户操作
// 页面加载完成之后调用 - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigatio ...
- iOS:WKWebView(19-01-31更)
以前用得不多,先开一篇,以后有遇到再补充. 1.返回 2.JS 调用 OC 3.获取.修改.添加网页信息 1.返回 if (self.mWebView.canGoBack == YES) { [sel ...
- ios 解决Wkwebview闪烁问题
// 网页闪烁问题 if ([self.webView.realWebView isKindOfClass:[WKWebView class]]) { ((WKWebView * ...
- iOS中wkwebview加载本地html的要点
项目中有些页面,我采用了html页面开发,然后用wkwebview加载的设计.在加载过程中遇见了一些问题,在这里进行一些记载和讨论.如有不同意见欢迎进行评论沟通. 问题时候这样的: 在webview的 ...
随机推荐
- js字符串转成数字的三种方法
js读取的html代码中获得的值 ,统统是以字符串的形式呈现的,为了方便我们后面对数据的操作,有时候我们有必要进行转换一下. 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转 ...
- 新浪微博客户端(35)-使用NSMutableAttributedString实现多行文本的效果
DJComposeViewController.m import "DJComposeViewController.h" #import "DJAccountTool.h ...
- PHP简单漂亮的分页类
本文介绍一款原生的PHP分页类,分页样式有点类似bootstrap. <?php /* * ********************************************* * @类名 ...
- Mastering Web Application Development with AngularJS 读书笔记-前记
学习AngularJS的笔记,这个是英文版的,有些地方翻译的很随意,做的笔记不是很详细,用来自勉.觉得写下来要比看能理解的更深入点.有理解不对的地方还请前辈们纠正! 一.关于<Mastering ...
- python __future__ package的几个特性
我学习python过程, 和学习其它编程知识一样, 不是先读大部头书系统学习, 而是看博客和直接实践, 慢慢将这些知识点连成线, 再扩展到面. 这个过程缺点和优点都很明显. 缺点是, 有些知识点可能因 ...
- [译]angularjs directive design made easy
原文: http://seanhess.github.io/2013/10/14/angularjs-directive-design.html AngularJS directives很酷 Angu ...
- jQuery框架分析第一章: 第一个匿名函数
我的jQuery版本为1.7* 这个版本代码比之前的版本优化了很多,结构也清晰了不少,就用最新的吧. 打开jQuery源代码 首先你能看到所有代码被一个 (function(window,undefi ...
- android Home键和返回键
在Android中,当按下Home键,默认情况下stop前台的actiity,即activity设置成onstop,而不是ondestory.如果再次启动该activity不是调用onCreate,而 ...
- 真有用?Snap和Flatpak 通吃所有发行版的打包方式。
导读 最近我们听到越来越多的有关于Ubuntu的Snap包和由Red Hat员工Alexander Larsson创造的 Flatpak (曾经叫做 xdg-app)的消息.这两种下一代打包方法在本质 ...
- iOS项目目录结构
一. 目前最为流行的目录结构是: <先根据模块后根据功能> 的文件目录结构 优点: 模块分明, 并且开发和维护时方便查阅各个功能 缺点: 可能会出现模块内随意建立文件夹, 导致局部逻辑紊乱 ...