iOS应用加载Documents目录HTML时CSS无法生效问题求助

Hey，我碰到过好几个类似的iOS本地HTML加载CSS失败的问题，结合你的情况，应该是路径引用或者WebView配置的问题，给你几个具体的解决步骤：

• 检查HTML中的CSS引用路径
  你现在用的是写死的绝对file://路径，但iOS App的容器ID（就是你路径里的AD332281-2ADE-4809-ABF2-F3FC3004AF42）每次重装App都会变化，绝对路径肯定会失效。必须改用相对路径，比如在index.html里这样引用：

  <link rel="stylesheet" href="css/mother.css">
  

  这样WebView会自动从index.html所在的目录去寻找css子文件夹里的mother.css，不用管容器ID的变化。

• 配置WKWebView的本地访问权限（如果用的是WKWebView）
  WKWebView默认对本地文件的访问有严格限制，你需要在初始化WebView时做两个关键配置：

  // 获取MOTHER-APP目录下的index.html路径
  let docDir = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
  let indexURL = docDir.appendingPathComponent("MOTHER-APP/index.html")
  let motherAppDir = indexURL.deletingLastPathComponent()
  
  // 配置WebView
  let config = WKWebViewConfiguration()
  config.allowsFileAccessFromFileURLs = true
  // 允许WebView访问MOTHER-APP目录下的所有文件
  config.allowsReadAccessToURL = motherAppDir
  
  // 初始化并加载HTML
  let webView = WKWebView(frame: view.bounds, configuration: config)
  webView.loadFileURL(indexURL, allowingReadAccessTo: motherAppDir)
  view.addSubview(webView)
  

  这里的核心是allowingReadAccessTo必须指向index.html所在的父目录（也就是MOTHER-APP文件夹），这样WebView才能读取子文件夹里的CSS文件。

• 验证文件的实际路径是否匹配
  虽然你确认文件存在，但建议用代码打印出App运行时的实际Documents路径，确保你手动上传的文件位置和App访问的路径完全一致：

  let docDir = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
  let motherAppDir = docDir.appendingPathComponent("MOTHER-APP")
  print("当前MOTHER-APP实际路径：\(motherAppDir.path)")
  

  把打印出来的路径和你上传文件时用的路径对比，重点看容器ID是否一致——如果不一样，说明你把文件传到了旧的App容器里，重新传一次就行。

• 检查文件的读取权限
  有时候通过第三方工具传进App的文件可能没有读取权限，导致WebView无法加载。你可以用代码检查并修改权限：

  let cssURL = motherAppDir.appendingPathComponent("css/mother.css")
  do {
      // 修改权限为用户可读可写，其他用户可读
      try FileManager.default.setAttributes([.posixPermissions: 0o644], ofItemAtPath: cssURL.path)
      print("CSS文件权限已设置成功")
  } catch {
      print("设置权限失败：\(error.localizedDescription)")
  }
  

内容的提问来源于stack exchange，提问作者Mark Russell