WKWebView takeSnapshot在特定网站返回空白图像问题排查

一、空白截图的原因 #

部分网站会通过document.visibilityState或document.hidden检测页面是否处于前台可见状态，当WKWebView在后台（AppDelegate中加载、未加入可视视图层级）时，这些网站会停止渲染内容或隐藏页面元素，导致takeSnapshot返回空白图，但DOM结构已加载完成，因此JS获取尺寸的逻辑仍能正常工作。

另外，原代码中固定1.5秒的延迟并不可靠，部分网站的懒加载内容、动态渲染可能需要更长时间，未等内容渲染完成就截图也会导致空白。

二、针对后台加载的修复方案 #

1. 注入可见状态修改代码 #

在WKWebView初始化时或webView(_:didFinish:)方法中加入以下JS注入逻辑，强制让网站认为当前处于前台：

let visibilityFixJS = """
document.visibilityState = 'visible';
document.hidden = false;
// 覆盖原生属性，防止网站重新检测
Object.defineProperty(document, 'hidden', { get: () => false });
Object.defineProperty(document, 'visibilityState', { get: () => 'visible' });
"""
webView.evaluateJavaScript(visibilityFixJS, completionHandler: nil)

2. 替换固定延迟为动态等待 #

取消固定1.5秒延迟，改为监听页面资源加载完成，确保内容渲染稳定后再截图。例如通过JS确认所有资源加载完成：

webView.evaluateJavaScript("window.onload", completionHandler: { _, _ in
    // 资源加载完成后执行截图
    self.performSnapshot(webView: webView)
})

三、Apple.com视频缩放问题处理 #

针对视频元素自适应视口高度导致的布局异常，在调整webView frame后，触发一次页面resize事件，强制视频重新布局：

webView.frame = CGRect(x: 0, y: 0, width: targetWidth, height: targetHeight)
// 触发resize事件，强制页面重新布局
webView.evaluateJavaScript("window.dispatchEvent(new Event('resize'))", completionHandler: { _, _ in
    DispatchQueue.main.async {
        self.performSnapshot(webView: webView)
    }
})

四、takeSnapshot的替代方案 #

1. 使用drawHierarchy(in:afterScreenUpdates:) #

该方法会处理UIKit的完整渲染流程，比takeSnapshot更稳定，适合后台截图场景：

func performSnapshot(webView: WKWebView) {
    DispatchQueue.main.async {
        UIGraphicsBeginImageContextWithOptions(webView.bounds.size, false, UIScreen.main.scale)
        webView.drawHierarchy(in: webView.bounds, afterScreenUpdates: true)
        guard let image = UIGraphicsGetImageFromCurrentImageContext() else {
            UIGraphicsEndImageContext()
            return
        }
        UIGraphicsEndImageContext()
        NotificationCenter.default.post(name: NSNotification.Name("imageReady"), object: nil, userInfo: ["image": image])
    }
}

注意：需确保webView的frame已正确设置为内容尺寸，且在主线程执行。

2. 使用CALayer.render(in:) #

适合简单页面的截图，性能较高，但对复杂交互内容（如视频、WebGL）支持有限：

func captureWebViewLayer(webView: WKWebView) -> UIImage? {
    UIGraphicsBeginImageContextWithOptions(webView.bounds.size, false, UIScreen.main.scale)
    guard let context = UIGraphicsGetCurrentContext() else { return nil }
    webView.layer.render(in: context)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

五、原代码优化建议 #

• 避免嵌套多层evaluateJavaScript，改用DispatchGroup简化逻辑：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    let group = DispatchGroup()
    
    group.enter()
    webView.evaluateJavaScript("document.readyState") { _, _ in group.leave() }
    
    var targetWidth: CGFloat = UIScreen.main.bounds.width
    group.enter()
    webView.evaluateJavaScript("document.body.scrollWidth") { result, _ in
        if let width = result as? CGFloat {
            targetWidth = width
        }
        group.leave()
    }
    
    var targetHeight: CGFloat = 0
    group.enter()
    webView.evaluateJavaScript("document.body.scrollHeight") { result, _ in
        if let height = result as? CGFloat {
            targetHeight = height
        }
        group.leave()
    }
    
    group.notify(queue: .main) {
        // 注入可见状态修复JS
        let visibilityFixJS = """
        document.visibilityState = 'visible';
        document.hidden = false;
        Object.defineProperty(document, 'hidden', { get: () => false });
        Object.defineProperty(document, 'visibilityState', { get: () => 'visible' });
        """
        webView.evaluateJavaScript(visibilityFixJS) { _, _ in
            webView.frame = CGRect(x: 0, y: 0, width: targetWidth, height: targetHeight)
            // 触发resize
            webView.evaluateJavaScript("window.dispatchEvent(new Event('resize'))") { _, _ in
                self.performSnapshot(webView: webView)
            }
        }
    }
}

• 移除强制解包，避免崩溃；
• 确保所有UI操作在主线程执行。

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