WWDC2017-Customized Loading in WKWebView

时间 2019-11-07

标签 wwdc2017 wwdc customized loading wkwebview 繁體版

原文原文链接

做者: iOS团队 - 高祥javascript

官方连接: developer.apple.com/videos/play…html

WKWebView在iOS11主要提供了一下三个功能:java

Manage cookies(Cookie管理)
Filter unwanted content(过滤内容)
Provide custom resources(加载本地资源)

本文将详细介绍如何加载本地的资源(Image & JS)web

示例工程项目在: 分支: Provide-Custom-resourcesswift

1、准备工做

新建一个工程,命名为wwdc2017-220-WKWebViewSimpleDemobash
导入 WebKit cookie
建立WKWebView，加载事先准备好的URLapp
```
准备好的URL(后面要对这个html分析)
http://oub5vvxvp.bkt.clouddn.com/customized_wkwebView.html
复制代码
```
运行起来，毛都没有？ what？出错了？不不不，你须要在info.plist中添加ATSide
```
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

复制代码
```
好了，在运行一下，若是成下面这样，恭喜你，准备工做完成了。 post

2、自定义资源

自定义资源一共分为以下步骤:

自定义 URL Scheme
设置 URLSchemeHandler
Provide custom resource(提供对应的资源)

2.1 自定义 URL Scheme

在上面的加载视图中，能够看到，图片未加载出来，并且点击按钮也是没有任何响应的. 在HTML中，定义了 img.src 和 js.src 为 URL Scheme

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h3 id="photo"> 自定义图片:canineschool-avatar://photo  </h3>
    
    <!-- 注意 src -->
    ![](canineschool-avatar:///photo)
    <hr/ >
    
    <!-- 注意 src -->
    <script src="canineschool-avatar:///javascript"> </script>
    
    <h3 id="javascript"> 自定义 JS 代码 canineschool-avatar://javascript </h3>

    <button type="button" onclick="myFunction()"> 点击这里 </button>

</body>
</html>
复制代码

关于URL Scheme我就不详细的去说了，不懂的话能够去参考URL Schemes 使用详解这篇文章。

值得指出的是，在html中配置的URL Scheme, 是不须要注册到info.plist URL Types的

2.2 设置 URLSchemeHandler

明确了须要处理的URL Scheme 以后，就须要一个“处理者”。能够经过WKWebViewConfiguration来设置.

open func setURLSchemeHandler(_ urlSchemeHandler: WKURLSchemeHandler?, forURLScheme urlScheme: String)
复制代码

而其中: WKURLSchemeHandler 是一个自定义的协议

@available(iOS 11.0, *)
public protocol WKURLSchemeHandler : NSObjectProtocol {

    public func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask)

    public func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask)
}
复制代码

好了，这些很明确了，咱们须要一个对象，来遵循这个协议来，而后再协议定义的方法里面去处理. So Easy

自定义一个 Handler，遵循对应的协议

class MyURLSchemeHandler : NSObject, WKURLSchemeHandler {
    
    func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) {
        
    }
    func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask) {
        
    }
}
复制代码

改变WebView的初始化方式

let configuration = WKWebViewConfiguration()
        configuration.setURLSchemeHandler(MyURLSchemeHandler(), forURLScheme: "canineschool-avatar")
        
        let webView = WKWebView(frame: self.view.bounds, configuration: configuration)
复制代码

注意: 一个Handler 只能处理一个 URL Scheme

2.4 Provide custom resource(提供对应的资源)

首先准备好资源
在 WKURLSchemeHandler 的 start 中方法中处理URL Scheme

处理代码，仅参考

func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) {
        
        let urlString = urlSchemeTask.request.url?.absoluteString ?? ""
        
        guard let type = URLSchemeType(rawValue: urlString) else {
            urlSchemeTask.didFailWithError(URLSchemeError.NotSupport(url: urlString))
            return
        }
        
        print(urlString)
        
        var response : URLResponse?
        var data : Data?
        
        switch type {
        case .Photo:
            guard let img = UIImage(named: "avatar"), let imageData = UIImagePNGRepresentation(img) else {
                return urlSchemeTask.didFailWithError(URLSchemeError.LackResource(url: urlString))
            }
            data = imageData
            response = URLResponse(url: urlSchemeTask.request.url!,
                                   mimeType: "image/png",
                                   expectedContentLength: imageData.count,
                                   textEncodingName: nil)
        case .Script:
            
            guard let path = Bundle.main.path(forResource: "alert.js", ofType: nil) else {
                return urlSchemeTask.didFailWithError(URLSchemeError.LackResource(url: urlString))
            }
            let fileURL = URL(fileURLWithPath: path)
            
            guard let scriptData = try? Data(contentsOf: fileURL) else  {
                return urlSchemeTask.didFailWithError(URLSchemeError.LackResource(url: urlString))
            }
            
            data = scriptData
            response = URLResponse(url: urlSchemeTask.request.url!,
                                   mimeType: "text/javascript",
                                   expectedContentLength:scriptData.count,
                                   textEncodingName: nil)
        }
        
        guard let receiveData = data,  let res = response else {
            return
        }
        urlSchemeTask.didReceive(res)
        urlSchemeTask.didReceive(receiveData)
        urlSchemeTask.didFinish()
    }
复制代码

处理对应的URL Scheme 须要注意以下几点:

1. 处理生成的 URLResponse 必需要有mimeType > mimeType类型能够在 developer.mozilla.org/zh-CN/docs/…

2.处理成功，必需要调用以下代码

// 告诉wkwebView 接收到了响应
urlSchemeTask.didReceive(res)
// 提供给webview对应的数据
urlSchemeTask.didReceive(receiveData)
// 告诉webView完成了
urlSchemeTask.didFinish()
复制代码

1. WKWebView
2. Android In ListView Loading Data
3. (error) LOADING Redis is loading the dataset in memory
4. Error(s) in loading state_dict for DataParallel
5. wkwebview
6. (error) LOADING Redis is loading the dataset in memory问题解决
7. Swift WKWebView
8. WKWebView 实例
9. WKWebView详解&WKWebVieW和JS交互
10. WKWebView的使用
更多相关文章...
• SQL IN 操作符 - SQL 教程
• Swift for-in 循环 - Swift 教程
• Composer 安装与使用
• C# 中 foreach 遍历的用法