WKWebView加载本地HTML文件和样式文件总结

先简单介绍下我在工作中关于WKWebView的使用场景：
1、首先是从后台获取到HTML富文本字符串内容，然后使用WKWebView加载出来
2、将CSS样式文件下载到沙盒，以及将CSS样式文件预存到应用程序资源路径下，使用WKWebView加载样式文件。CSS文件下载成功的情况下使用下载的CSS文件，要是下载失败就使用程序资源路径下的CSS文件

加载资源路径下的CSS文件

//imageJS为HTML富文本字符串内容
var imageJS = """
            <!DOCTYPE html>
            <html>
            <head>
            <meta charset="UTF-8">
            <!--meta-->
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no"/>
            <meta http-equiv="Content-Style-Type" content="text/css" />
            <link rel="stylesheet" type="text/css" href="\(cssFileName).css">
            </head style='width:100% !important'>
            <body>
            <div class="ql-container ql-snow">
            <div class="ql-editor">
            \(self.HTMLContentStr)
            </div>
            </div>
            
            </body>
            </html>
            """
//self.HTMLContentStr为HTMLbody的内容
//cssFileName为CSS样式文件的名字


cssFileUrl = Bundle.main.bundlePath
//采用loadHTMLString方式加载
self.contentWeb.loadHTMLString(imageJS, baseURL: URL(fileURLWithPath: cssFileUrl))

此处温馨提示下，项目中使用多个TARGETS的话，记得把CSS文件的Target Membership 勾上：

截屏2019-10-11下午2.52.44.png

加载沙盒路径下的CSS文件

尝试一：

self.contentWeb.loadHTMLString(imageJS, baseURL: URL(fileURLWithPath: cssFileUrl))
//imageJS与上面一样
//cssFileUrl改为沙盒中CSS文件的路径

样式文件没有生效，尝试失败。

尝试二：

self.contentWeb.loadHTMLString(imageJS, baseURL: URL(fileURLWithPath: cssFileUrl, isDirectory: false))
//imageJS与上面一样
//cssFileUrl为沙盒中CSS文件的路径

这个时候用模拟器跑出来是可以正确加载CSS文件的，可是换成真机却没效果了❓❓❓❓❓❓❓❓
这里我尝试了很多办法，可在真机情况下依旧无法加载CSS文件，如果有解决办法，欢迎在评论区讨论🐼

尝试三：
换一种加载方式，使用：

open func loadFileURL(_ URL: URL, allowingReadAccessTo readAccessURL: URL) -> WKNavigation?

    do {
        //将HTML富文本内容写入沙盒CSS同一文件夹下,采用loadFileURL方式加载
        //cssFileUrl为沙盒中CSS文件所在文件夹的路径
        let _ = try imageJS.write(to: URL(fileURLWithPath: cssFileUrl + "/content.html"), atomically: true, encoding: .utf8)
        
        let contentURL = URL(fileURLWithPath: cssFileUrl + "/content.html")
        let AccessURL = URL(fileURLWithPath: cssFileUrl)
        
        self.contentWeb.loadFileURL(contentURL, allowingReadAccessTo: AccessURL)
                                    
    }catch{

    }

模拟器运行正常，真机运行正常🤠🤠🤠🤠
注意注意注意 cssFileUrl为沙盒中CSS文件所在文件夹的路径，即下图中cssFile文件的路径。

截屏2019-10-11下午3.37.53.png

总结下

WKWebView使用：

open func loadHTMLString(_ string: String, baseURL: URL?) -> WKNavigation?

在真机下可以正确加载资源路径下的CSS文件，而在沙盒路径下的CSS文件不能正确加载（如果该方法有加载沙盒路径CSS文件的方法，欢迎大家在评论区告诉我😁😁😁）

WKWebView使用：

open func loadFileURL(_ URL: URL, allowingReadAccessTo readAccessURL: URL) -> WKNavigation?

在真机下可以正确加载沙盒路径下的CSS文件。资源路径为只读，不可写入就不讨论了。

最后编辑于：2019.10.11 15:52:24