WKWebView中需通过userContentController桥接实现HTML5签名板双向通信：JS用postMessage上报toDataURL("image/png")数据，原生截去data:前缀后解码；清空操作须JS在requestAnimationFrame中执行；配置需设navigationDelegate、用loadFileURL加载本地资源并开启isInspectable调试。
WKWebView 中如何正确加载并通信 HTML5 签名板
iOS 原生无法直接调用 HTML5 签名板，必须通过 WKWebView 加载签名页面，并建立双向通信。关键不是“调用”，而是“桥接”：让 JS 能把签名数据传出来，原生能告诉 JS 何时清空或保存。
- 签名板必须是纯前端实现（如
signature_pad、rough.js或自研 canvas 绘制），不依赖 Flash 或插件 - 务必在
WKWebViewConfiguration中启用userContentController，否则postMessage会静默失败 - JS 注入时机很重要：要在签名组件初始化完成后再监听
message事件，否则可能收不到原生发来的指令 - 签名图像导出推荐用
toDataURL("image/png")，避免 iOS Safari 对jpeg的颜色空间兼容问题
如何从 WKWebView 安全获取签名图片 Base64 数据
不能直接用 evaluateJavaScript(_:completionHandler:) 拿 canvas 数据——Safari 对跨域/非主线程 canvas 读取有限制，容易返回空字符串或抛 SecurityError。
- 确保 canvas 元素未设置
crossOrigin属性，且图片资源同源（本地 HTML 文件用loadFileURL(_:allowingReadAccessTo:)加载） - 用
window.webkit.messageHandlers.signatureBridge.postMessage({type:"getSignature",data:canvas.toDataURL("image/png")})主动上报，比轮询或回调更可靠 - 原生侧在
userContentController(_:didReceive:)中检查message.body["type"] == "getSignature"，再解码 Base64 字符串为Data - Base64 前缀如
"data:image/png;base64,"必须截掉，否则Data(base64Encoded:)返回 nil
签名板清空、重置逻辑为何在 iOS 上经常失效
常见表现是 JS 调用 clear() 没反应，或再次签名时残留上一次笔迹。根本原因是 WKWebView 的 JS 执行上下文与渲染线程不同步，尤其在页面滚动或键盘弹起后。
- 不要在原生端直接执行
clear()后立刻触发签名；应通过postMessage发送{type:"reset"}，由 JS 在requestAnimationFrame回调里执行清除 - 若使用
signature_pad，需手动调用instance.clear()和instance.off()再instance.on()，否则事件监听器可能重复绑定 - 键盘弹出时 canvas 尺寸可能被压缩，导致坐标偏移；应在
resize事件中重新调用instance.resizeCanvas()（如果封装了该方法）
WKWebView 配置和权限绕不开的三个坑
很多签名功能在模拟器正常，真机失败，大概率卡在这几处：
立即学习“前端免费学习笔记（深入）”；
-
WKWebView初始化时没设navigationDelegate，导致页面跳转或表单提交中断签名流程；建议至少实现webView(_:decidePolicyFor:decisionHandler:)并对非目标 URLdecisionHandler(.allow) - HTML 文件含本地资源（如字体、JS 库）时，必须用
loadFileURL(_:allowingReadAccessTo:)，且allowingReadAccessTo:参数要指向整个资源目录，不能只给 HTML 文件路径 - iOS 15+ 对
WKWebView的isInspectable默认关闭，调试 JS 报错困难；开发阶段建议开启：webView.isInspectable = true（仅 Debug）
签名数据落地前务必验证 Base64 解码后的 Data 是否有效——UIImage(data: data)?.pngData() 不为 nil，否则可能是传输截断或编码错误。真机调试时，Xcode 控制台看不到 JS console.log，得靠 messageHandlers 中转日志。
