WKWebView加載本地HTML文件和樣式文件總結(jié)

先簡單介紹下我在工作中關(guān)于WKWebView的使用場景:
1、首先是從后臺(tái)獲取到HTML富文本字符串內(nèi)容,然后使用WKWebView加載出來
2、將CSS樣式文件下載到沙盒,以及將CSS樣式文件預(yù)存到應(yīng)用程序資源路徑下,使用WKWebView加載樣式文件。CSS文件下載成功的情況下使用下載的CSS文件,要是下載失敗就使用程序資源路徑下的CSS文件

加載資源路徑下的CSS文件
//imageJS為HTML富文本字符串內(nèi)容
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的內(nèi)容
//cssFileName為CSS樣式文件的名字


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

此處溫馨提示下,項(xiàng)目中使用多個(gè)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文件的路徑

這個(gè)時(shí)候用模擬器跑出來是可以正確加載CSS文件的,可是換成真機(jī)卻沒效果了????????
這里我嘗試了很多辦法,可在真機(jī)情況下依舊無法加載CSS文件,如果有解決辦法,歡迎在評論區(qū)討論??

嘗試三:
換一種加載方式,使用:

open func loadFileURL(_ URL: URL, allowingReadAccessTo readAccessURL: URL) -> WKNavigation?
    do {
        //將HTML富文本內(nèi)容寫入沙盒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{

    }

模擬器運(yùn)行正常,真機(jī)運(yùn)行正常????????
注意 注意 注意 cssFileUrl為沙盒中CSS文件所在文件夾的路徑,即下圖中cssFile文件的路徑。

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

總結(jié)下

WKWebView使用:

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

在真機(jī)下可以正確加載資源路徑下的CSS文件,而在沙盒路徑下的CSS文件不能正確加載(如果該方法有加載沙盒路徑CSS文件的方法,歡迎大家在評論區(qū)告訴我??????)


WKWebView使用:

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

在真機(jī)下可以正確加載沙盒路徑下的CSS文件。資源路徑為只讀,不可寫入就不討論了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容