网页如何引用iOS App Assets中的local.css文件？

远程网页（http://test.com/test.htm）无法直接通过href路径引用iOS App Assets中的local.css——因为远程网页运行在WebView的网络上下文，App本地资源处于沙盒隔离环境，存在跨域和访问权限限制。以下是两种可行的实现方式：

方式一：自定义URL协议拦截资源请求 #

1. 给WKWebView配置自定义协议处理器，比如定义app-local://协议来映射本地资源：

   class LocalResourceHandler: NSObject, WKURLSchemeHandler {
       func webView(_ webView: WKWebView, start urlSchemeTask: WKURLSchemeTask) {
           guard let url = urlSchemeTask.request.url, url.scheme == "app-local" else {
               urlSchemeTask.didFailWithError(NSError(domain: "InvalidScheme", code: -1, userInfo: nil))
               return
           }
           
           // 从Assets中读取local.css文件
           if let asset = NSDataAsset(name: "local") {
               let response = URLResponse(url: url, mimeType: "text/css", expectedContentLength: asset.data.count, textEncodingName: "utf-8")
               urlSchemeTask.didReceive(response)
               urlSchemeTask.didReceive(asset.data)
               urlSchemeTask.didFinish()
           } else {
               urlSchemeTask.didFailWithError(NSError(domain: "AssetNotFound", code: -2, userInfo: nil))
           }
       }
       
       func webView(_ webView: WKWebView, stop urlSchemeTask: WKURLSchemeTask) {}
   }
   

2. 初始化WKWebView时注册该协议：

   let config = WKWebViewConfiguration()
   let handler = LocalResourceHandler()
   config.setURLSchemeHandler(handler, forURLScheme: "app-local")
   let webView = WKWebView(frame: view.bounds, configuration: config)
   

3. 远程网页中引用CSS的路径写法：

   <link rel="stylesheet" type="text/css" href="app-local://local.css">
   

方式二：加载网页时直接注入CSS内容 #

不需要在网页中写link标签，而是在WebView加载远程页面后，把local.css的内容注入到页面里：

// 先从Assets读取CSS内容
var cssContent = ""
if let asset = NSDataAsset(name: "local") {
    cssContent = String(data: asset.data, encoding: .utf8) ?? ""
}

// 加载远程网页并注入CSS
webView.load(URLRequest(url: URL(string: "http://test.com/test.htm")!))
webView.evaluateJavaScript("document.head.innerHTML += '<style>\(cssContent)</style>'") { result, error in
    if let error = error {
        print("CSS注入失败: \(error)")
    }
}

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