WKWebView长按eSIM二维码无「Add eSIM」选项问题求助

问题背景 #

使用WKWebView加载包含eSIM二维码的URL时，长按二维码无法触发系统的「Add eSIM」上下文菜单选项，但改用SFSafariViewController加载同一URL时该功能正常工作。

原因分析 #

SFSafariViewController作为系统原生浏览器组件，默认集成了系统级的内容识别能力（包括eSIM二维码的识别）；而WKWebView默认未开启QR码识别的相关配置，需要手动启用该功能。

解决方案 #

通过配置WKWebViewConfiguration，开启dataDetectorTypes中的.qrCode类型，让WKWebView具备识别QR码的能力，从而触发系统的「Add eSIM」交互选项。

修改后的代码示例 #

struct QRView: UIViewRepresentable {
    let url: URL

    func makeUIView(context: Context) -> WKWebView {
        // 创建配置对象并开启QR码识别
        let configuration = WKWebViewConfiguration()
        // 注意：.qrCode 仅支持 iOS 11.0 及以上版本
        if #available(iOS 11.0, *) {
            configuration.dataDetectorTypes.insert(.qrCode)
        }
        
        let webView = WKWebView(frame: .zero, configuration: configuration)
        webView.load(URLRequest(url: url))
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {}
}

额外注意事项 #

• iOS版本兼容：.qrCode数据检测类型从iOS 11.0开始支持，若需兼容更低版本，需做版本判断。
• 页面内容限制：确保页面中的二维码图片未被CSS属性（如user-select: none、pointer-events: none）禁止交互，否则长按无法触发识别。
• 交互权限：确认WKWebView的isUserInteractionEnabled属性为true（默认值为true，无需额外设置，除非手动修改过）。

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