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 遍歷的用法

相關標籤/搜索

wkwebview

wkwebview+uitableview

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。