WKWebView确实从本地文档文件夹加载资源 [英] WKWebView does load resources from local document folder

问题描述

在我的Swift iOS应用程序中，我想从远程服务器下载一些动态HTML页面，将它们保存在文档目录中，并从文档目录中显示这些页面。

In my Swift iOS app, I want to download some dynamic HTML pages from a remote server, save them in the document directory, and display those pages from document directory.

我用它来加载页面：

var appWebView:WKWebView?
...
appWebView!.loadRequest(NSURLRequest(URL: NSURL(fileURLWithPath: htmlPath)))

一切都在模拟器上运行，但当我转移到真正的手机时，它只是显示一个空白页面。然后我使用Safari连接到应用程序，发现它抱怨无法加载资源。

Everything works on the simulator, but when I moved to real phones, it just showed a blank page. I then connected to the app using Safari, and found it complained with "Failed to load resource".

然后我尝试首先阅读页面内容 htmlPath ，然后使用

I then tried to first read the content of the page at htmlPath, then use

appWebView!.loadHTMLString()

加载页面。它在HTML页面很简单时有效。但是如果HTML引用了其他内容，即文档目录中的JavaScript文件（使用绝对路径，如< script src =file：//// var / mobile / Containers / Data / Application /762035C9-2BF2-4CDD-B5B1-574A0E2B0728/Documents/xxxxx.js\"> ），它将无法加载。

to load the page. It works when the HTML page is simple. But if the HTML references something else, i.e. a JavaScript file also in the document directory (with an absolute path like <script src="file:////var/mobile/Containers/Data/Application/762035C9-2BF2-4CDD-B5B1-574A0E2B0728/Documents/xxxxx.js">), it will fail to load.

有谁知道为什么会这样，以及如何解决这个问题？

Does anyone know why this happens, and how to resolve the issue?

更多信息：

• XCode版本：7.3.1


• 部署目标：8.1（我也尝试使用9.3，但这没有帮助。）

推荐答案

这是我用来加载我的项目中的本地文件（iOS 10，Swift 3）的简化版本。我根据Raghuram和Fox5150在评论中的要求，在iOS 10.3.1和iPhone 7+上再次测试后，更新了我的代码（7.5.2017）。

This is a simplified version of what I have used to load local files in a project of mine (iOS 10, Swift 3). I have just updated my code (7.5.2017) after testing it out again on iOS 10.3.1 and iPhone 7+ as requested by Raghuram and Fox5150 in the comments.

我刚创建了一个全新的项目，这是文件夹结构：

I just created a completely new project and this is the folder structure:

更新19.04.2018：添加了一个新功能，用HTML，CSS，JS文件下载.zip，将其解压缩到/ Documents /（Alamofire + Zip）中，然后加载这些文件进入webView。您也可以在 GitHub示例项目中找到它。再次，随意分叉&星！ ：）

Update 19.04.2018: Added a new feature to download a .zip with HTML, CSS, JS files, unzip it in /Documents/ (Alamofire + Zip) and then load those files into the webView. You can find it in the GitHub sample project as well. Again, feel free to fork & star! :)

更新08.02.2018：最后添加了 GitHub示例项目，其中还包含一个本地JavaScript文件。随意叉和星！ ：）

Update 08.02.2018: finally added a GitHub sample project, which also includes a local JavaScript file. Feel free to fork & star! :)

ViewController.swift

ViewController.swift

import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        let webView = WKWebView()
        let htmlPath = Bundle.main.path(forResource: "index", ofType: "html")
        let htmlUrl = URL(fileURLWithPath: htmlPath!, isDirectory: false)
        webView.loadFileURL(htmlUrl, allowingReadAccessTo: htmlUrl)
        webView.navigationDelegate = self
        view = webView
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

版本2与webView.loadHTMLString（）

ViewController.swift

Version 2 with webView.loadHTMLString()

ViewController.swift

import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
    override func viewDidLoad() {
        super.viewDidLoad()
        let webView = WKWebView()
        let htmlPath = Bundle.main.path(forResource: "index", ofType: "html")
        let folderPath = Bundle.main.bundlePath
        let baseUrl = URL(fileURLWithPath: folderPath, isDirectory: true)
        do {
            let htmlString = try NSString(contentsOfFile: htmlPath!, encoding: String.Encoding.utf8.rawValue)
             webView.loadHTMLString(htmlString as String, baseURL: baseUrl)
        } catch {
            // catch error
        }
        webView.navigationDelegate = self
        view = webView
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

需要注意：

• 确保您的本地html / js / css文件位于Project - > Target - >构建阶段 - >复制捆绑资源


• 确保您的html文件不引用相对路径，例如 css / styles.css 因为iOS会压扁你的文件结构，而style.css将与index.html处于同一级别，所以写< link rel =stylesheettype =text / csshref =styles.css> 而不是

• Make sure that your local html/js/css files are in Project -> Target -> Build Phases -> Copy Bundle Resources
• Make sure that your html files don't reference relative paths e.g. css/styles.css because iOS will flatten your file structure and styles.css will be on the same level as index.html so write <link rel="stylesheet" type="text/css" href="styles.css"> instead

鉴于这两个版本，这里的问题是来自项目的html / css文件：

web / index.html

web/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    <title>Offline WebKit</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1 id="webkit-h1">Offline WebKit!</h1>
  </body>
</html>

web / css / styles.css

web/css/styles.css

#webkit-h1 {
  font-size: 80px;
  color: lightblue;
}

如果有人想要一个GitHub示例项目，请在评论部分告诉我和我将上传它。

If somebody wants a GitHub sample project, tell me in the comments section and I'll upload it.

这篇关于WKWebView确实从本地文档文件夹加载资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！