首页 文章

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

提问于
浏览 次
6

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

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

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

swift cocoa cocoa-touch webkit wkwebview

1 回答

  • 19

    更新了Swift 4，Xcode 9.3

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

    解决方案（快速）

    • 将web文件夹添加到项目中（文件>将文件添加到项目）

    • 如果需要，复制项目

    • 创建文件夹引用*

    • 添加到目标（适用）

    • 将以下代码添加到 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文件的文件夹导入到项目中的任何位置 . 确保你：

    Xcode > File > Add Files to "Project"

    ☑️根据需要复制项目☑️创建文件夹参考（不是“创建组”）☑️添加到目标

    第2步

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

    let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "folder")!
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)
    }

}

    如果您有任何关于此方法或代码的问题，我会尽力回答！

    回复于

相关问题