如何在WKWebView中加载带参数的本地下载HTML文件？

这个问题我之前也碰到过！WKWebView对本地文件URL的参数解析逻辑和UIWebView不一样，直接用字符串拼接参数生成的file URL，WKWebView没法正确识别这些查询参数，所以才会显示空白。下面给你两种可行的解决方案：

方法一：用URLComponents正确构建带参数的本地URL #

这是最直接的修复方式，通过URLComponents来构建包含查询参数的本地文件URL，确保WKWebView能正确解析：

// 1. 先获取不带参数的本地文件路径
let basePath = Constants.Path.document + "/APP/index.html"
guard let baseUrl = URL(fileURLWithPath: basePath) else {
    print("Invalid base file URL")
    return
}

// 2. 使用URLComponents添加查询参数
var components = URLComponents(url: baseUrl, resolvingAgainstBaseURL: false)
components?.queryItems = [
    URLQueryItem(name: "param1", value: "180"),
    URLQueryItem(name: "param2", value: "2")
]

guard let finalUrl = components?.url else {
    print("Failed to build final URL")
    return
}

// 3. 加载URL，注意readAccessToURL还是文件所在的目录
let readAccessUrl = finalUrl.deletingLastPathComponent()
webView?.loadFileURL(finalUrl, allowingReadAccessTo: readAccessUrl)

为什么这个方法有效？因为URLComponents会按照标准的URL格式来处理查询参数，生成的URL是WKWebView能正确识别的格式，而直接字符串拼接的方式会让参数部分被当成文件路径的一部分，导致WKWebView找不到正确的文件。

方法二：页面加载后通过JS传递参数 #

如果第一种方法不适用，你也可以先加载不带参数的index.html，等页面加载完成后，通过evaluateJavaScript把参数传递给页面，让页面自己处理跳转逻辑：

// 先加载不带参数的页面
let basePath = Constants.Path.document + "/APP/index.html"
let baseUrl = URL(fileURLWithPath: basePath)
let readAccessUrl = baseUrl.deletingLastPathComponent()
webView?.loadFileURL(baseUrl, allowingReadAccessTo: readAccessUrl)

// 实现WKNavigationDelegate的didFinish方法，页面加载完成后传参
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 这里假设你的页面有接收参数的JS函数，比如handleParams
    let param1 = "180"
    let param2 = "2"
    let jsString = "handleParams('\(param1)', '\(param2)');"
    webView.evaluateJavaScript(jsString) { result, error in
        if let error = error {
            print("JS execution error: \(error)")
        }
    }
}

记得要给webView设置navigationDelegate，这样才能触发didFinish回调。

两种方法都能解决你的问题，第一种更贴近你原本的需求，推荐优先尝试~

内容的提问来源于stack exchange，提问作者ΩlostA