Swift Firebase环境下WKWebView加载YouTube嵌入视频异常求助

我来帮你捋捋这个问题——直接用嵌入链接没问题，但从Firebase拿代码就报错，这种情况大概率是嵌入代码的格式、转义或者加载方式出了问题，咱们一步步排查：

1. 先对比Firebase返回的代码和你直接用的代码 #

这是最直观的排查步骤，你可以在拿到Firebase的代码后立刻打印出来，和你手动输入的正确嵌入代码做对比：

// 假设firebaseEmbedCode是从Firebase获取的变量，directEmbedCode是你手动写的正确代码
print("Firebase返回的代码: \(firebaseEmbedCode)")
print("直接使用的代码: \(directEmbedCode)")

常见的差异点：

• 有没有多余的转义字符？比如Firestore存储字符串时可能自动把双引号转成\"，或者换行符被转义成\n，这会导致WKWebView解析HTML出错。如果有，用这个方法清理：

  let cleanedCode = firebaseEmbedCode.replacingOccurrences(of: "\\", with: "")
  

• 代码是否完整？比如<iframe>标签的src属性、闭合标签、allowfullscreen等关键属性有没有缺失？正确的YouTube嵌入代码结构应该是类似这样：

  <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
  

2. 确认WKWebView的加载方式是否正确 #

如果是加载HTML字符串，一定要用loadHTMLString(_:baseURL:)方法，并且把baseURL设为YouTube的域名，这样嵌入脚本才能正确加载：

let cleanedHtml = firebaseEmbedCode.replacingOccurrences(of: "\\", with: "")
webView.loadHTMLString(cleanedHtml, baseURL: URL(string: "https://www.youtube.com"))

要是你直接把嵌入代码当成URL去加载（比如load(URLRequest(url: URL(string: firebaseEmbedCode)!))），那肯定会报错，因为嵌入代码是HTML，不是合法的URL。

3. 查看WKWebView的错误日志 #

给WKWebView加上错误监听，能精准定位问题：

func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
    print("加载错误详情: \(error.localizedDescription)")
    if let urlError = error as? URLError {
        print("错误代码: \(urlError.code.rawValue)")
    }
}

比如如果是URL无效，日志会明确告诉你；如果是资源加载被阻止，可能是ATS设置的问题。

4. 检查ATS设置（备选） #

虽然直接加载没问题，但还是确认下Info.plist里的App Transport Security是否允许YouTube的域名：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>youtube.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <false/>
        </dict>
    </dict>
</dict>

不过现在YouTube都是HTTPS，这个大概率不是问题，但可以作为兜底排查项。

先从第一步的代码对比开始，绝大多数情况都是字符串转义或者格式不匹配导致的，找到差异点就能快速解决啦～

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