在 WKWebView 中加载本地 Web 文件和资源

Question

与 UIWebView 和以前版本的 WKWebView（iOS 10 和 macOS 10.12）不同，本地文件的默认加载操作已从Bundle.main.path移动到Bundle.main.url 。 同样， loadFileURL也成为了 WKWebView 中加载本地资源的默认函数。

我知道.path和.url是完全不同的，并且在过去都有效 - .path历史上是默认选择的方法； 然而，似乎最新版本的 Swift 已经破坏了大多数（如果不是全部） .path解决方案。 .path解决方案现在似乎扁平化了目录层次结构，将所有 CSS、JS 和任何其他子目录内容放入一个大目录中。 当 WKWebView 尝试加载 index.html 时，这会导致加载错误，例如，使用链接的子文件夹样式表（即/css/style.css ）。

在看到无数的问题和无数的不确定/破碎的答案后，是否有一种快速而轻松的解决方案来实现可以加载本地资源（包括链接的 CSS/JS 文件）的 WKWebView，而无需任何解决方法？

Answer 1

为 Swift 4、Xcode 9.3 更新

---

此方法允许 WKWebView 正确读取链接的 CSS、JS 和大多数其他文件的目录和子目录的层次结构。 你不需要改变你的HTML，CSS和JS代码。

解决方案（快速）

1. 将 web 文件夹添加到您的项目（文件 > 添加文件到项目）
   • 如果需要，复制项目
   • 创建文件夹引用 *
   • 添加到目标（适用）

2. 将以下代码添加到viewDidLoad并根据您的需要对其进行个性化设置：

    let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")! webView.loadFileURL(url, allowingReadAccessTo: url) let request = URLRequest(url: url) webView.load(request)

---

解决方案（深入）

第 1 步

将本地 Web 文件的文件夹导入到您的项目中。 确保您：

☑️ 如有需要，复制物品

☑️创建文件夹引用（不是“创建组”）

☑️ 添加到目标

第 2 步

使用 WKWebView 转到 View Controller 并将以下代码添加到viewDidLoad方法：

let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!
webView.loadFileURL(url, allowingReadAccessTo: url)
let request = URLRequest(url: url)
webView.load(request)

• index – 要加载的文件的名称（不带.html扩展名）
• website - 您的网络文件夹的名称（ index.html应位于此目录的根目录下）

结论

整体代码应如下所示：

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        webView.uiDelegate = self
        webView.navigationDelegate = self

        let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "Website")!
        webView.loadFileURL(url, allowingReadAccessTo: url)
        let request = URLRequest(url: url)
        webView.load(request)
    }

}

如果大家对这个方法或者代码还有什么疑问，我会尽力解答的！

Answer 2

这项工作对我来说：

        WKWebView *wkwebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)];
        wkwebView.navigationDelegate = self;
        wkwebView.UIDelegate = self;
        [wkwebView.configuration.preferences setValue:@"TRUE" forKey:@"allowFileAccessFromFileURLs"];
        NSURL *url = [NSURL fileURLWithPath:YOURFILEPATH];
        [wkwebView loadFileURL:url allowingReadAccessToURL:url.URLByDeletingLastPathComponent];
        [self.view addSubview:wkwebView];

Answer 3

我遇到了与我的情况相同的问题，我正在从服务器下载一些 HTML 内容并将其保存到 Document 目录并在应用程序中显示它。 同一个控制器使用 LIVE URL，我也必须使用 url 方案放置条件。 在 iOS 13 Xcode 11 上测试

  if Url.scheme == "file" as String {
         wkWebView.loadFileURL(Url, allowingReadAccessTo: Url)
    }
    else {
         let request = URLRequest.init(url: Url, cachePolicy:.reloadIgnoringLocalCacheData, timeoutInterval:60)
         wkWebView.load(request)
    }

它对我来说很完美

Answer 4

1, 打开项目设置并进入 Build Phases 选项卡，打开 Link Binary with Libraries。 添加 Webkit 框架。

2，将html添加到您的项目中（如果需要，请复制项目）

3、将这个添加到你的代码中：@IBOutlet weak var webView: WKWebView!

4、viewDidLoad viewDidLoad

Answer 5

可以在WKWebView html 代码中使用您项目中的资源甚至共享库。
例如，我展示了如何从包含ResourceContainingBundleClassNamed类的包中加载pic.png 。

NSSTring * htmlCode = @"<img src='pic.png'>";
NSBundle * bundle = [NSBundle bundleForClass:[ResourceContainingBundleClassNamed class]];
NSURL * base = bundle.resourceURL;
WKWebView * represent = [WKWebView new];
[represent loadHtmlString: htmlCode baseURL: base];

神奇之处在于resourceURL包属性。 如果您只是获取所需文件的路径，则将其转换为 URL - 没有成功。