• 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 = 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下的。




  • 相关阅读:
    [leetcode]43. Multiply Strings
    [leetcode]387. First Unique Character in a String
    Penetration Test
    Penetration Test
    Penetration Test
    Penetration Test
    Penetration Test
    Penetration Test
    Penetration Test
    Penetration Test
  • 原文地址:https://www.cnblogs.com/breezemist/p/4595906.html
Copyright © 2020-2023  润新知